fix: modal layout for mobile view

frontend/src/components/Fields.vue

@@ -9,7 +9,9 @@
       <div
         class="grid gap-4"
         :class="
-          section.columns ? 'grid-cols-' + section.columns : 'grid-cols-3'
+          section.columns
+            ? 'grid-cols-' + section.columns
+            : 'grid-cols-2 sm:grid-cols-3'
         "
       >
         <div v-for="field in section.fields" :key="field.name">
@@ -131,6 +133,7 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import Link from '@/components/Controls/Link.vue'
 import { usersStore } from '@/stores/users'
 import { Tooltip } from 'frappe-ui'
+import { isMobileView } from '@/composables/settings'
 
 const { getUser } = usersStore()
 

frontend/src/components/Modals/DealModal.vue

@@ -7,7 +7,7 @@
     }"
   >
     <template #body-content>
-      <div class="mb-4 grid grid-cols-3 gap-4">
+      <div class="mb-4 grid sm:grid-cols-3 grid-cols-1 gap-4">
         <div class="flex items-center gap-3 text-sm text-gray-600">
           <div>{{ __('Choose Existing Organization') }}</div>
           <Switch v-model="chooseExistingOrganization" />

frontend/src/components/Modals/EmailTemplateModal.vue

@@ -15,7 +15,7 @@
   >
     <template #body-content>
       <div class="flex flex-col gap-4">
-        <div class="flex gap-4">
+        <div class="flex sm:flex-row flex-col gap-4">
           <div class="flex-1">
             <div class="mb-1.5 text-sm text-gray-600">
               {{ __('Name') }}

frontend/src/components/Modals/TaskModal.vue

@@ -22,7 +22,9 @@
           variant="outline"
           size="sm"
           :label="
-            task.reference_doctype == 'CRM Deal' ? __('Open Deal') : __('Open Lead')
+            task.reference_doctype == 'CRM Deal'
+              ? __('Open Deal')
+              : __('Open Lead')
           "
           @click="redirect()"
         >
@@ -44,7 +46,9 @@
           />
         </div>
         <div>
-          <div class="mb-1.5 text-sm text-gray-600">{{ __('Description') }}</div>
+          <div class="mb-1.5 text-sm text-gray-600">
+            {{ __('Description') }}
+          </div>
           <TextEditor
             variant="outline"
             ref="description"
@@ -52,10 +56,12 @@
             :bubbleMenu="true"
             :content="_task.description"
             @change="(val) => (_task.description = val)"
-            :placeholder="__('Took a call with John Doe and discussed the new project.')"
+            :placeholder="
+              __('Took a call with John Doe and discussed the new project.')
+            "
           />
         </div>
-        <div class="flex items-center gap-2 overflow-x-auto">
+        <div class="flex flex-wrap items-center gap-2">
           <Dropdown :options="taskStatusOptions(updateTaskStatus)">
             <Button :label="_task.status" class="w-full justify-between">
               <template #prefix>