chore: rearranged code

frontend/src/components/Activities/Activities.vue

@@ -9,6 +9,10 @@
     :whatsappBox="whatsappBox"
     :modalRef="modalRef"
   />
+  <FadedScrollableDiv
+    :maskHeight="30"
+    class="flex flex-col flex-1 overflow-y-auto"
+  >
     <div
       v-if="all_activities?.loading"
       class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
@@ -16,25 +20,23 @@
       <LoadingIndicator class="h-6 w-6" />
       <span>{{ __('Loading...') }}</span>
     </div>
-  <FadedScrollableDiv
-    v-else-if="title == 'WhatsApp' && whatsappMessages.data?.length"
-    :maskHeight="30"
-    class="activities flex-1 overflow-y-auto"
+    <div
+      v-else-if="
+        activities?.length ||
+        (whatsappMessages.data?.length && title == 'WhatsApp')
+      "
+      class="activities"
     >
+      <div v-if="title == 'WhatsApp' && whatsappMessages.data?.length">
         <WhatsAppArea
           class="px-4 sm:px-10"
           v-model="whatsappMessages"
           v-model:reply="replyMessage"
           :messages="whatsappMessages.data"
         />
-  </FadedScrollableDiv>
-  <FadedScrollableDiv
-    v-else-if="activities?.length"
-    :maskHeight="30"
-    class="activities flex-1 overflow-y-auto"
-  >
+      </div>
       <div
-      v-if="title == 'Notes'"
+        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"
       >
         <div v-for="note in activities" @click="modalRef.showNote(note)">
@@ -50,7 +52,9 @@
               class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
               :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
             >
-            <div class="z-10 flex h-8 w-7 items-center justify-center bg-white">
+              <div
+                class="z-10 flex h-8 w-7 items-center justify-center bg-white"
+              >
                 <CommentIcon class="text-gray-800" />
               </div>
             </div>
@@ -157,7 +161,10 @@
             />
           </div>
         </div>
-      <div v-if="activity.activity_type == 'communication'" class="pb-5 mt-px">
+        <div
+          v-if="activity.activity_type == 'communication'"
+          class="pb-5 mt-px"
+        >
           <EmailArea :activity="activity" :emailBox="emailBox" />
         </div>
         <div
@@ -183,7 +190,9 @@
               class="inline-flex gap-1.5 text-gray-800 font-medium"
             >
               <div class="inline-flex gap-1">
-              <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
+                <span>{{
+                  activity.show_others ? __('Hide') : __('Show')
+                }}</span>
                 <span> +{{ activity.other_versions.length + 1 }} </span>
                 <span>{{ __('changes from') }}</span>
                 <span>{{ activity.owner_name }}</span>
@@ -314,7 +323,9 @@
               </div>
 
               <div class="ml-auto whitespace-nowrap">
-              <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
+                <Tooltip
+                  :text="dateFormat(activity.creation, dateTooltipFormat)"
+                >
                   <div class="text-sm text-gray-600">
                     {{ __(timeAgo(activity.creation)) }}
                   </div>
@@ -324,7 +335,7 @@
           </div>
         </div>
       </div>
-  </FadedScrollableDiv>
+    </div>
     <div
       v-else
       class="flex flex-1 flex-col items-center justify-center gap-3 text-xl font-medium text-gray-500"
@@ -357,6 +368,8 @@
         @click="modalRef.showTask()"
       />
     </div>
+  </FadedScrollableDiv>
+  <div>
     <CommunicationArea
       ref="emailBox"
       v-if="['Emails', 'Comments', 'Activity'].includes(title)"
@@ -374,6 +387,7 @@
       :doctype="doctype"
       @scroll="scroll"
     />
+  </div>
   <WhatsappTemplateSelectorModal
     v-if="whatsappEnabled"
     v-model="showWhatsappTemplates"