From 8385b6b9a6b08196603f2cc2a1c42535e519691a Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Thu, 22 Oct 2026 00:29:40 +0530
Subject: [PATCH 1/2] fix login layout and agent control spacing

---
 .../components/combobox/SelectCombobox.vue    | 18 +++++++-------
 .../src/components/sidebar/SidebarNavUser.vue | 10 +++-----
 .../conversation/EmailConversationForm.vue    |  2 +-
 .../conversation/WhatsAppConversationForm.vue |  2 +-
 .../conversation/composerRowClasses.js        |  2 +-
 .../apps/main/src/layouts/auth/AuthLayout.vue | 24 +++----------------
 6 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/frontend/apps/main/src/components/combobox/SelectCombobox.vue b/frontend/apps/main/src/components/combobox/SelectCombobox.vue
index 8f6dbb2b..40109a58 100644
--- a/frontend/apps/main/src/components/combobox/SelectCombobox.vue
+++ b/frontend/apps/main/src/components/combobox/SelectCombobox.vue
@@ -17,7 +17,7 @@
     <template #item="{ item }">
       <div class="flex items-center gap-2">
         <!--USER -->
-        <div v-if="type === 'user'" class="relative">
+        <div v-if="type === 'user'" class="relative flex shrink-0">
           <Avatar class="w-7 h-7">
             <AvatarImage :src="item.avatar_url || ''" :alt="item.label.slice(0, 2)" />
             <AvatarFallback>{{ item.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
@@ -26,7 +26,7 @@
             v-if="item.availability_status"
             :status="item.availability_status"
             size="sm"
-            class="absolute -bottom-[3px] -right-[3px]"
+            class="absolute bottom-0 right-0"
           />
         </div>
 
@@ -45,7 +45,7 @@
       <div class="flex items-center gap-2 min-w-0">
         <div v-if="selected" class="flex items-center gap-2 min-w-0">
           <!--USER -->
-          <div v-if="type === 'user'" class="relative shrink-0">
+          <div v-if="type === 'user'" class="relative flex shrink-0">
             <Avatar class="w-7 h-7">
               <AvatarImage :src="selected.avatar_url || ''" :alt="selected.label.slice(0, 2)" />
               <AvatarFallback>{{ selected.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
@@ -54,17 +54,19 @@
               v-if="selected.availability_status"
               :status="selected.availability_status"
               size="sm"
-              class="absolute -bottom-[3px] -right-[3px]"
+              class="absolute bottom-0 right-0"
             />
           </div>
 
           <!-- Others -->
-          <PriorityMarker v-else-if="type === 'priority'" :priority="selected.label" :tooltip="false" />
+          <PriorityMarker
+            v-else-if="type === 'priority'"
+            :priority="selected.label"
+            :tooltip="false"
+          />
           <span v-else-if="selected.emoji" class="shrink-0">{{ selected.emoji }}</span>
           <span class="truncate">{{ selected.label }}</span>
-          <span
-            v-if="isCurrentUser(selected)"
-            class="text-muted-foreground text-xs shrink-0"
+          <span v-if="isCurrentUser(selected)" class="text-muted-foreground text-xs shrink-0"
             >({{ t('globals.terms.you') }})</span
           >
         </div>
diff --git a/frontend/apps/main/src/components/sidebar/SidebarNavUser.vue b/frontend/apps/main/src/components/sidebar/SidebarNavUser.vue
index 58f1e842..359b7760 100644
--- a/frontend/apps/main/src/components/sidebar/SidebarNavUser.vue
+++ b/frontend/apps/main/src/components/sidebar/SidebarNavUser.vue
@@ -1,11 +1,8 @@
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <SidebarMenuButton
-        size="default"
-        class="p-0 !overflow-visible"
-      >
-        <div class="relative">
+      <SidebarMenuButton size="default" class="p-0">
+        <div class="relative flex shrink-0">
           <Avatar class="h-8 w-8">
             <AvatarImage :src="userStore.avatar" alt="U" />
             <AvatarFallback>
@@ -15,7 +12,7 @@
           <StatusDot
             :status="userStore.user.availability_status"
             size="sm"
-            class="absolute -bottom-[3px] -right-[3px]"
+            class="absolute bottom-0 right-0"
           />
         </div>
         <div class="grid flex-1 text-left text-sm leading-tight">
@@ -107,7 +104,6 @@
       </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
-
 </template>
 
 <script setup>
diff --git a/frontend/apps/main/src/features/conversation/EmailConversationForm.vue b/frontend/apps/main/src/features/conversation/EmailConversationForm.vue
index 0409b7fd..ff0e06f4 100644
--- a/frontend/apps/main/src/features/conversation/EmailConversationForm.vue
+++ b/frontend/apps/main/src/features/conversation/EmailConversationForm.vue
@@ -191,7 +191,7 @@
         </FormItem>
       </FormField>
 
-      <div :class="[ROW_CLASS, 'grid grid-cols-1 sm:grid-cols-2 sm:gap-4']">
+      <div :class="[ROW_CLASS, 'grid grid-cols-1 gap-y-1 py-1 sm:grid-cols-2 sm:gap-4']">
         <FormField v-slot="{ componentField }" name="team_id">
           <FormItem class="flex items-center gap-2 min-w-0 space-y-0">
             <FormLabel :class="ROW_LABEL_CLASS">{{ $t('globals.terms.team', 1) }}</FormLabel>
diff --git a/frontend/apps/main/src/features/conversation/WhatsAppConversationForm.vue b/frontend/apps/main/src/features/conversation/WhatsAppConversationForm.vue
index a70f9f68..92f2a410 100644
--- a/frontend/apps/main/src/features/conversation/WhatsAppConversationForm.vue
+++ b/frontend/apps/main/src/features/conversation/WhatsAppConversationForm.vue
@@ -110,7 +110,7 @@
         />
       </div>
 
-      <div :class="[ROW_CLASS, 'grid grid-cols-1 sm:grid-cols-2 sm:gap-4']">
+      <div :class="[ROW_CLASS, 'grid grid-cols-1 gap-y-1 py-1 sm:grid-cols-2 sm:gap-4']">
         <div class="flex items-center gap-2 min-w-0">
           <span :class="ROW_LABEL_CLASS">{{ $t('globals.terms.team', 1) }}</span>
           <SelectTeamCombobox
diff --git a/frontend/apps/main/src/features/conversation/composerRowClasses.js b/frontend/apps/main/src/features/conversation/composerRowClasses.js
index bbd6860b..df416ffd 100644
--- a/frontend/apps/main/src/features/conversation/composerRowClasses.js
+++ b/frontend/apps/main/src/features/conversation/composerRowClasses.js
@@ -3,7 +3,7 @@ export const ROW_LABEL_CLASS = 'w-12 shrink-0 text-sm font-normal text-muted-for
 export const ROW_INPUT_CLASS =
   'h-9 flex-1 min-w-0 border-0 bg-transparent px-0 shadow-none focus-visible:ring-0 focus:ring-0 placeholder:text-muted-foreground/60 data-[placeholder]:text-muted-foreground/60'
 export const ROW_COMBOBOX_CLASS =
-  'h-9 flex-1 min-w-0 border-0 bg-transparent px-0 font-normal shadow-none hover:bg-transparent'
+  'h-9 flex-1 min-w-0 border-0 bg-transparent px-2 font-normal shadow-none hover:bg-transparent'
 export const ROW_COMBOBOX_EMPTY_CLASS = `${ROW_COMBOBOX_CLASS} text-muted-foreground/60`
 export const ROW_MESSAGE_CLASS = 'pb-2 pl-14'
 
diff --git a/frontend/apps/main/src/layouts/auth/AuthLayout.vue b/frontend/apps/main/src/layouts/auth/AuthLayout.vue
index 949a09e0..1e5cfe6c 100644
--- a/frontend/apps/main/src/layouts/auth/AuthLayout.vue
+++ b/frontend/apps/main/src/layouts/auth/AuthLayout.vue
@@ -1,11 +1,7 @@
 <template>
-  <div class="relative isolate h-screen overflow-y-auto overscroll-contain bg-background">
-    <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
-      <div class="auth-grid absolute inset-0" />
-      <div class="auth-light absolute inset-0" />
-    </div>
-    <div class="relative flex min-h-full flex-col">
-      <main class="flex flex-1 items-center justify-center px-4 py-10 sm:px-6 sm:py-16">
+  <div class="h-screen overflow-y-auto overscroll-contain bg-secondary">
+    <div class="flex min-h-full flex-col">
+      <main class="flex flex-1 items-start justify-center px-4 pb-10 pt-[15vh] sm:px-6">
         <div class="auth-content w-full max-w-sm">
           <slot />
         </div>
@@ -22,21 +18,7 @@ import PoweredBy from '@shared-ui/components/PoweredBy.vue'
 </script>
 
 <style scoped>
-.auth-grid {
-  background-image: linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
-    linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
-  background-size: 48px 48px;
-  mask-image: radial-gradient(ellipse at center, transparent 20%, black 85%);
-}
-
-.auth-light {
-  background: radial-gradient(ellipse at 50% 35%, hsl(var(--primary) / 0.08), transparent 65%);
-}
-
 .auth-content > :deep(*) {
   border-radius: calc(var(--radius) + 0.25rem);
-  box-shadow:
-    0 20px 60px -20px hsl(var(--foreground) / 0.15),
-    0 0 0 4px hsl(var(--background) / 0.6);
 }
 </style>

From f7d8ed5b2494bfdcd06adf28fcefa53bc40caf27 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Thu, 22 Oct 2026 00:33:04 +0530
Subject: [PATCH 2/2] show all permitted sidebar sections when reordering

---
 .../conversation/sidebar/ConversationSideBar.vue      | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/apps/main/src/features/conversation/sidebar/ConversationSideBar.vue b/frontend/apps/main/src/features/conversation/sidebar/ConversationSideBar.vue
index 8ab63acd..41e24d39 100644
--- a/frontend/apps/main/src/features/conversation/sidebar/ConversationSideBar.vue
+++ b/frontend/apps/main/src/features/conversation/sidebar/ConversationSideBar.vue
@@ -252,7 +252,8 @@ const sections = computed(() => [
   {
     id: 'contact_notes',
     label: t('globals.terms.note', 2),
-    visible: !!conversationStore.current?.contact?.id && userStore.can('contact_notes:read')
+    visible: !!conversationStore.current?.contact?.id,
+    permitted: userStore.can('contact_notes:read')
   },
   { id: 'previous_conversations', label: t('globals.terms.conversation', 2) }
 ])
@@ -268,7 +269,7 @@ const normalizedOrder = computed(() => {
 const visibleSections = computed(() =>
   normalizedOrder.value
     .map((id) => sections.value.find((section) => section.id === id))
-    .filter((section) => section.visible !== false)
+    .filter((section) => section.visible !== false && section.permitted !== false)
 )
 const reducedMotion = usePreferredReducedMotion()
 const editingSections = ref(false)
@@ -278,12 +279,12 @@ const editableSections = computed({
   get: () =>
     draftOrder.value
       .map((id) => sections.value.find((section) => section.id === id))
-      .filter((section) => section && section.visible !== false),
+      .filter((section) => section && section.permitted !== false),
   set: (reordered) => {
-    const visibleIds = new Set(editableSections.value.map((section) => section.id))
+    const editableIds = new Set(editableSections.value.map((section) => section.id))
     let index = 0
     draftOrder.value = draftOrder.value.map((id) =>
-      visibleIds.has(id) ? reordered[index++].id : id
+      editableIds.has(id) ? reordered[index++].id : id
     )
   }
 })