fix: make other dependent component responsive

frontend/src/components/CommentBox.vue

@@ -12,14 +12,14 @@
     <template v-slot:editor="{ editor }">
       <EditorContent
         :class="[
-          editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
+          editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
         ]"
         :editor="editor"
       />
     </template>
     <template v-slot:bottom>
       <div v-if="editable" class="flex flex-col gap-2">
-        <div class="flex flex-wrap gap-2 px-10">
+        <div class="flex flex-wrap gap-2 sm:px-10 px-4">
           <AttachmentItem
             v-for="a in attachments"
             :key="a.file_url"
@@ -35,7 +35,7 @@
           </AttachmentItem>
         </div>
         <div
-          class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
+          class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
         >
           <div class="flex items-center overflow-x-auto">
             <TextEditorFixedMenu

frontend/src/components/CommunicationArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between gap-3 border-t px-10 py-2.5">
+  <div class="flex justify-between gap-3 border-t sm:px-10 px-4 py-2.5">
     <div class="flex gap-1.5">
       <Button
         ref="sendEmailRef"

frontend/src/components/EmailEditor.vue

@@ -9,7 +9,7 @@
     :editable="editable"
   >
     <template #top>
-      <div class="mx-10 flex items-center gap-2 border-t py-2.5">
+      <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5">
         <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
         <TextInput
           class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
@@ -17,7 +17,7 @@
         />
       </div>
       <div
-        class="mx-10 flex items-center gap-2 border-t py-2.5"
+        class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5"
         :class="[cc || bcc ? 'border-b' : '']"
       >
         <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
@@ -32,7 +32,7 @@
       </div>
       <div
         v-if="cc"
-        class="mx-10 flex items-center gap-2 py-2.5"
+        class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5"
         :class="bcc ? 'border-b' : ''"
       >
         <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
@@ -46,7 +46,7 @@
           "
         />
       </div>
-      <div v-if="bcc" class="mx-10 flex items-center gap-2 py-2.5">
+      <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5">
         <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
         <MultiselectInput
           ref="bccInput"
@@ -62,14 +62,14 @@
     <template v-slot:editor="{ editor }">
       <EditorContent
         :class="[
-          editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
+          editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
         ]"
         :editor="editor"
       />
     </template>
     <template v-slot:bottom>
       <div v-if="editable" class="flex flex-col gap-2">
-        <div class="flex flex-wrap gap-2 px-10">
+        <div class="flex flex-wrap gap-2 sm:px-10 px-4">
           <AttachmentItem
             v-for="a in attachments"
             :key="a.file_url"
@@ -85,7 +85,7 @@
           </AttachmentItem>
         </div>
         <div
-          class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
+          class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
         >
           <div class="flex items-center overflow-x-auto">
             <TextEditorFixedMenu

frontend/src/components/SLASection.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-col gap-1.5 border-b px-6 py-3">
+  <div class="flex flex-col gap-1.5 border-b sm:px-6 py-3 px-4">
     <div
       v-for="s in slaSection"
       :key="s.label"
       class="flex items-center gap-2 text-base leading-5"
     >
-      <div class="w-[106px] text-sm text-gray-600">{{ __(s.label) }}</div>
+      <div class="sm:w-[106px] w-36 text-sm text-gray-600">{{ __(s.label) }}</div>
       <div class="grid min-h-[28px] items-center">
         <Tooltip v-if="s.tooltipText" :text="__(s.tooltipText)">
           <div class="ml-2 cursor-pointer">

frontend/src/components/SectionFields.vue

@@ -9,7 +9,7 @@
       class="flex items-center gap-2 px-3 leading-5 first:mt-3"
     >
       <Tooltip :text="__(field.label)" hoverDelay="1">
-        <div class="w-[106px] shrink-0 truncate text-sm text-gray-600">
+        <div class="sm:w-[106px] w-36 shrink-0 truncate text-sm text-gray-600">
           <span>{{ __(field.label) }}</span>
           <span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
         </div>

frontend/src/components/WhatsAppBox.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="reply?.message"
-    class="flex items-center justify-around gap-2 px-10 pt-2"
+    class="flex items-center justify-around gap-2 sm:px-10 px-4 pt-2"
   >
     <div
       class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600"
@@ -18,7 +18,7 @@
 
     <Button variant="ghost" icon="x" @click="reply = {}" />
   </div>
-  <div class="flex items-end gap-2 px-10 py-2.5">
+  <div class="flex items-end gap-2 sm:px-10 px-4 py-2.5">
     <div class="flex h-8 items-center gap-2">
       <FileUploader @success="(file) => uploadFile(file)">
         <template v-slot="{ openFileSelector }">