From 8e291d65faea3992f0cb21bf4b96838987173273 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 19:03:40 +0530
Subject: [PATCH] fix: made email template & whatsapp template list responsive

---
 .../Modals/EmailTemplateSelectorModal.vue         |  2 +-
 .../Modals/WhatsappTemplateSelectorModal.vue      | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
index 77179dd3..2538e7f7 100644
--- a/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/EmailTemplateSelectorModal.vue
@@ -16,7 +16,7 @@
       </TextInput>
       <div
         v-if="filteredTemplates.length"
-        class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto"
+        class="mt-2 grid max-h-[560px] sm:grid-cols-3 gris-cols-1 gap-2 overflow-y-auto"
       >
         <div
           v-for="template in filteredTemplates"
diff --git a/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
index 0df92da0..000d5cf5 100644
--- a/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
+++ b/frontend/src/components/Modals/WhatsappTemplateSelectorModal.vue
@@ -16,7 +16,7 @@
       </TextInput>
       <div
         v-if="filteredTemplates.length"
-        class="mt-2 grid max-h-[560px] grid-cols-3 gap-2 overflow-y-auto"
+        class="mt-2 grid max-h-[560px] grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-3"
       >
         <div
           v-for="template in filteredTemplates"
@@ -41,7 +41,11 @@
           <div class="text-lg text-gray-500">
             {{ __('No templates found') }}
           </div>
-          <Button :label="__('Create New')" class="mt-4" />
+          <Button
+            :label="__('Create New')"
+            class="mt-4"
+            @click="newWhatsappTemplate"
+          />
         </div>
       </div>
     </template>
@@ -68,7 +72,7 @@ const templates = createListResource({
   doctype: 'WhatsApp Templates',
   cache: ['whatsappTemplates'],
   fields: ['name', 'template', 'footer'],
-  filters: { status: 'APPROVED', for_doctype: ['in', [props.doctype, '']]},
+  filters: { status: 'APPROVED', for_doctype: ['in', [props.doctype, '']] },
   orderBy: 'modified desc',
   pageLength: 99999,
   auto: true,
@@ -88,5 +92,10 @@ const filteredTemplates = computed(() => {
   )
 })
 
+function newWhatsappTemplate() {
+  show.value = false
+  window.open('/app/whatsapp-templates/new')
+}
+
 watch(show, (value) => value && nextTick(() => searchInput.value?.el?.focus()))
 </script>