fix: separated tab and details section

frontend/src/pages/Lead.vue

@@ -41,7 +41,9 @@
       />
     </template>
   </LayoutHeader>
+  <div class="flex h-full overflow-hidden">
     <TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @change="onTabChange">
+      <div class="flex flex-col flex-1">
         <TabList class="flex items-center gap-6 border-b pl-5 relative">
           <Tab
             ref="tabRef"
@@ -64,8 +66,7 @@
             :style="{ left: `${indicatorLeftValue}px` }"
           />
         </TabList>
-    <div class="flex h-full overflow-hidden">
-      <div class="flex-1 flex flex-col">
+        <div class="flex flex-col h-full overflow-auto">
           <TabPanels class="flex flex-1 overflow-hidden">
             <TabPanel
               class="flex-1 flex flex-col overflow-y-auto"
@@ -88,7 +89,9 @@
             v-model="lead"
           />
         </div>
-      <div class="flex flex-col justify-between border-l w-[370px]">
+      </div>
+    </TabGroup>
+    <div class="flex flex-col justify-between border-l w-[352px]">
       <FileUploader @success="changeLeadImage" :validateFile="validateFile">
         <template #default="{ openFileSelector, error }">
           <div
@@ -219,9 +222,7 @@
                         v-else-if="field.type === 'user'"
                         :options="activeAgents"
                         :value="getUser(lead.data[field.name]).full_name"
-                          @change="
-                            (option) => updateAssignedAgent(option.email)
-                          "
+                        @change="(option) => updateAssignedAgent(option.email)"
                         class="form-control"
                         :placeholder="field.placeholder"
                       >
@@ -312,7 +313,6 @@
       </div>
     </div>
   </div>
-  </TabGroup>
   <NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
 </template>
 <script setup>