From 2a18a556bf6fbefc6aee2d10c3e7e9d529f33298 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 4 Aug 2025 12:30:48 +0530
Subject: [PATCH] refactor: update Activities component for improved z-index
 layering

---
 frontend/auto-imports.d.ts                    | 10 ++++++++++
 .../src/components/Activities/Activities.vue  | 20 +++++++++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)
 create mode 100644 frontend/auto-imports.d.ts

diff --git a/frontend/auto-imports.d.ts b/frontend/auto-imports.d.ts
new file mode 100644
index 00000000..9d240079
--- /dev/null
+++ b/frontend/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 44396a49..2c8d0341 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -50,11 +50,13 @@
             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:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white"
               >
                 <CommentIcon class="text-ink-gray-8" />
               </div>
@@ -72,11 +74,13 @@
             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:border-l after:border-outline-gray-modals"
-              :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+              class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
+              :class="
+                i != activities.length - 1 ? 'before:h-full' : 'before:h-4'
+              "
             >
               <div
-                class="z-[1] flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
+                class="flex h-8 w-7 items-center justify-center bg-surface-white text-ink-gray-8"
               >
                 <MissedCallIcon
                   v-if="call.status == 'No Answer'"
@@ -116,11 +120,11 @@
       >
         <div
           v-if="['Activity', 'Emails'].includes(title)"
-          class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:border-l before:border-outline-gray-modals"
+          class="z-0 relative flex justify-center before:absolute before:left-[50%] before:-z-[1] before:top-0 before:border-l before:border-outline-gray-modals"
           :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
         >
           <div
-            class="z-[1] flex h-7 w-7 items-center justify-center bg-surface-white"
+            class="flex h-7 w-7 items-center justify-center bg-surface-white"
             :class="{
               'mt-2.5': ['communication'].includes(activity.activity_type),
               'bg-surface-white': ['added', 'removed', 'changed'].includes(