From d016996118363560c62473edc5081f8600a3dc88 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 22 Jul 2024 13:27:50 +0530
Subject: [PATCH] style: style fix for mobile view

---
 .../src/components/Activities/Activities.vue  | 123 +++++++++---------
 .../components/Activities/ActivityHeader.vue  |   2 +-
 .../src/components/Activities/CallArea.vue    |   4 +-
 .../src/components/Activities/CommentArea.vue |   2 +-
 .../src/components/Activities/EmailArea.vue   |  10 +-
 .../src/components/Activities/WhatsAppBox.vue |   4 +-
 6 files changed, 70 insertions(+), 75 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 21e993bf..d8e66fa5 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -29,7 +29,7 @@
     >
       <div v-if="title == 'WhatsApp' && whatsappMessages.data?.length">
         <WhatsAppArea
-          class="px-4 sm:px-10"
+          class="px-3 sm:px-10"
           v-model="whatsappMessages"
           v-model:reply="replyMessage"
           :messages="whatsappMessages.data"
@@ -37,7 +37,7 @@
       </div>
       <div
         v-else-if="title == 'Notes'"
-        class="grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
+        class="grid grid-cols-1 gap-4 px-3 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
       >
         <div v-for="note in activities" @click="modalRef.showNote(note)">
           <NoteArea :note="note" v-model="all_activities" />
@@ -46,7 +46,7 @@
       <div v-else-if="title == 'Comments'" class="pb-5">
         <div v-for="(comment, i) in activities">
           <div
-            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-4 sm:gap-4 sm:px-10"
+            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-4 sm:px-10"
           >
             <div
               class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
@@ -62,7 +62,10 @@
           </div>
         </div>
       </div>
-      <div v-else-if="title == 'Tasks'" class="px-4 pb-3 sm:px-10 sm:pb-5">
+      <div
+        v-else-if="title == 'Tasks'"
+        class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
+      >
         <TaskArea
           v-model="all_activities"
           v-model:doc="doc"
@@ -74,7 +77,7 @@
       <div v-else-if="title == 'Calls'" class="activity">
         <div v-for="(call, i) in activities">
           <div
-            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
+            class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 sm:px-10"
           >
             <div
               class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
@@ -103,15 +106,15 @@
       <div
         v-else
         v-for="(activity, i) in activities"
-        class="activity px-4 sm:px-10"
+        class="activity px-3 sm:px-10"
         :class="
-          title == 'Activity'
+          ['Activity', 'Emails'].includes(title)
             ? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
             : ''
         "
       >
         <div
-          v-if="title == 'Activity'"
+          v-if="['Activity', 'Emails'].includes(title)"
           class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
@@ -187,16 +190,12 @@
           <div class="flex items-center justify-stretch gap-2 text-base">
             <div
               v-if="activity.other_versions"
-              class="inline-flex gap-1.5 text-gray-800 font-medium"
+              class="inline-flex flex-wrap gap-1.5 text-gray-800 font-medium"
             >
-              <div class="inline-flex gap-1">
-                <span>{{
-                  activity.show_others ? __('Hide') : __('Show')
-                }}</span>
-                <span> +{{ activity.other_versions.length + 1 }} </span>
-                <span>{{ __('changes from') }}</span>
-                <span>{{ activity.owner_name }}</span>
-              </div>
+              <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
+              <span> +{{ activity.other_versions.length + 1 }} </span>
+              <span>{{ __('changes from') }}</span>
+              <span>{{ activity.owner_name }}</span>
               <Button
                 class="!size-4"
                 variant="ghost"
@@ -271,55 +270,51 @@
               v-for="activity in [activity, ...activity.other_versions]"
               class="flex items-start justify-stretch gap-2 py-1.5 text-base"
             >
-              <div class="flex items-start gap-1 text-gray-600">
-                <div class="flex flex-1 items-center gap-1">
-                  <span
-                    v-if="activity.data.field_label"
-                    class="max-w-xs truncate text-gray-600"
+              <div class="inline-flex flex-wrap gap-1 text-gray-600">
+                <span
+                  v-if="activity.data.field_label"
+                  class="max-w-xs truncate text-gray-600"
+                >
+                  {{ __(activity.data.field_label) }}
+                </span>
+                <FeatherIcon
+                  name="arrow-right"
+                  class="mx-1 h-4 w-4 text-gray-600"
+                />
+                <span v-if="activity.type">
+                  {{ startCase(__(activity.type)) }}
+                </span>
+                <span
+                  v-if="activity.data.old_value"
+                  class="max-w-xs font-medium text-gray-800"
+                >
+                  <div
+                    class="flex items-center gap-1"
+                    v-if="activity.options == 'User'"
                   >
-                    {{ __(activity.data.field_label) }}
-                  </span>
-                  <FeatherIcon
-                    name="arrow-right"
-                    class="mx-1 h-4 w-4 text-gray-600"
-                  />
-                </div>
-                <div class="flex flex-wrap items-center gap-1">
-                  <span v-if="activity.type">{{
-                    startCase(__(activity.type))
-                  }}</span>
-                  <span
-                    v-if="activity.data.old_value"
-                    class="max-w-xs font-medium text-gray-800"
+                    <UserAvatar :user="activity.data.old_value" size="xs" />
+                    {{ getUser(activity.data.old_value).full_name }}
+                  </div>
+                  <div class="truncate" v-else>
+                    {{ activity.data.old_value }}
+                  </div>
+                </span>
+                <span v-if="activity.to">{{ __('to') }}</span>
+                <span
+                  v-if="activity.data.value"
+                  class="max-w-xs font-medium text-gray-800"
+                >
+                  <div
+                    class="flex items-center gap-1"
+                    v-if="activity.options == 'User'"
                   >
-                    <div
-                      class="flex items-center gap-1"
-                      v-if="activity.options == 'User'"
-                    >
-                      <UserAvatar :user="activity.data.old_value" size="xs" />
-                      {{ getUser(activity.data.old_value).full_name }}
-                    </div>
-                    <div class="truncate" v-else>
-                      {{ activity.data.old_value }}
-                    </div>
-                  </span>
-                  <span v-if="activity.to">{{ __('to') }}</span>
-                  <span
-                    v-if="activity.data.value"
-                    class="max-w-xs font-medium text-gray-800"
-                  >
-                    <div
-                      class="flex items-center gap-1"
-                      v-if="activity.options == 'User'"
-                    >
-                      <UserAvatar :user="activity.data.value" size="xs" />
-                      {{ getUser(activity.data.value).full_name }}
-                    </div>
-                    <div class="truncate" v-else>
-                      {{ activity.data.value }}
-                    </div>
-                  </span>
-                </div>
+                    <UserAvatar :user="activity.data.value" size="xs" />
+                    {{ getUser(activity.data.value).full_name }}
+                  </div>
+                  <div class="truncate" v-else>
+                    {{ activity.data.value }}
+                  </div>
+                </span>
               </div>
 
               <div class="ml-auto whitespace-nowrap">
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 6230cbf0..60a70898 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -55,7 +55,7 @@
       </template>
       <span>{{ __('New Task') }}</span>
     </Button>
-    <div class="flex gap-2" v-else-if="title == 'WhatsApp'">
+    <div class="flex gap-2 shrink-0" v-else-if="title == 'WhatsApp'">
       <Button
         :label="__('Send Template')"
         @click="showWhatsappTemplates = true"
diff --git a/frontend/src/components/Activities/CallArea.vue b/frontend/src/components/Activities/CallArea.vue
index 19f0749f..c320ba98 100644
--- a/frontend/src/components/Activities/CallArea.vue
+++ b/frontend/src/components/Activities/CallArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mb-1 flex items-start justify-stretch gap-2 py-1 text-base">
+    <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
       <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
         <Avatar
           :image="activity.caller.image"
@@ -55,7 +55,7 @@
           />
         </div>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center flex-wrap gap-2">
         <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
           <template #prefix>
             <CalendarIcon class="size-3" />
diff --git a/frontend/src/components/Activities/CommentArea.vue b/frontend/src/components/Activities/CommentArea.vue
index c4dbab24..0adb51ed 100644
--- a/frontend/src/components/Activities/CommentArea.vue
+++ b/frontend/src/components/Activities/CommentArea.vue
@@ -1,6 +1,6 @@
 <template>
   <div :id="activity.name">
-    <div class="mb-1 flex items-start justify-stretch gap-2 py-1 text-base">
+    <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
       <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
         <UserAvatar class="mr-1" :user="activity.owner" size="md" />
         <span class="font-medium text-gray-800">
diff --git a/frontend/src/components/Activities/EmailArea.vue b/frontend/src/components/Activities/EmailArea.vue
index 5daea833..55bdc946 100644
--- a/frontend/src/components/Activities/EmailArea.vue
+++ b/frontend/src/components/Activities/EmailArea.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out"
+    class="cursor-pointer flex flex-col rounded-md shadow bg-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
   >
-    <div class="-mb-0.5 flex items-center justify-between gap-2">
-      <div class="flex items-center gap-2">
+    <div class="-mb-0.5 flex items-center justify-between gap-2 truncate">
+      <div class="flex items-center gap-2 truncate">
         <span>{{ activity.data.sender_full_name }}</span>
-        <span class="text-sm text-gray-600">
+        <span class="sm:flex hidden text-sm text-gray-600">
           {{ '<' + activity.data.sender + '>' }}
         </span>
         <Badge
@@ -15,7 +15,7 @@
           theme="green"
         />
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 shrink-0">
         <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
           <div class="text-sm text-gray-600">
             {{ __(timeAgo(activity.creation)) }}
diff --git a/frontend/src/components/Activities/WhatsAppBox.vue b/frontend/src/components/Activities/WhatsAppBox.vue
index 6cc707b4..70f19fa9 100644
--- a/frontend/src/components/Activities/WhatsAppBox.vue
+++ b/frontend/src/components/Activities/WhatsAppBox.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="reply?.message"
-    class="flex items-center justify-around gap-2 px-4 pt-2 sm:px-10"
+    class="flex items-center justify-around gap-2 px-3 pt-2 sm:px-10"
   >
     <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-4 py-2.5 sm:px-10" v-bind="$attrs">
+  <div class="flex items-end gap-2 px-3 py-2.5 sm:px-10" v-bind="$attrs">
     <div class="flex h-8 items-center gap-2">
       <FileUploader @success="(file) => uploadFile(file)">
         <template v-slot="{ openFileSelector }">