From 8b9fa81594c843bbd22be9d87da9431537e41add Mon Sep 17 00:00:00 2001
From: Francisco Gaona <francisco.gaona@neogenia.com.mx>
Date: Thu, 8 Jan 2026 21:19:48 +0100
Subject: [PATCH] WIP - UI fixes for bottom bar

---
 frontend/components/AIChatBar.vue    |  2 +-
 frontend/components/BottomDrawer.vue | 61 ++++++++++++++++------------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/frontend/components/AIChatBar.vue b/frontend/components/AIChatBar.vue
index 6a28097..0e491b8 100644
--- a/frontend/components/AIChatBar.vue
+++ b/frontend/components/AIChatBar.vue
@@ -50,6 +50,6 @@ const handleSend = () => {
 
 <style scoped>
 .ai-chat-area {
-  min-height: 120px;
+  min-height: 190px;
 }
 </style>
diff --git a/frontend/components/BottomDrawer.vue b/frontend/components/BottomDrawer.vue
index 93d156f..af1720f 100644
--- a/frontend/components/BottomDrawer.vue
+++ b/frontend/components/BottomDrawer.vue
@@ -190,29 +190,34 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pointer-events-none absolute inset-x-0 bottom-0 z-30 flex justify-center px-4">
+  <div class="pointer-events-none fixed inset-x-0 bottom-0 z-30 flex justify-center px-2">
     <div
-      class="pointer-events-auto w-full max-w-5xl border border-border bg-background shadow-xl transition-all duration-200"
+      class="pointer-events-auto w-full border border-border bg-background shadow-xl transition-all duration-200"
       :style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
     >
-      <div class="flex items-center justify-between border-border px-4 py-2">
+      <div class="grid grid-cols-3 items-center justify-between border-border px-2 py-2">
 
-        <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
-          <TabsList class="mx-4 mt-2 grid w-fit grid-cols-2">
-            <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
-              <Phone class="h-4 w-4" />
-              Softphone
-              <span
-                class="inline-flex h-2 w-2 rounded-full"
-                :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
-              />
-            </TabsTrigger>
-            <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
-              <Sparkles class="h-4 w-4" />
-              AI Agent
-            </TabsTrigger>
-          </TabsList>
-        </Tabs>
+        <div class="flex">
+
+          <Tabs v-if="!isDrawerOpen" v-model="activeTab" class="flex h-full flex-col">
+            <TabsList class="mx-2 mt-2 grid w-fit grid-cols-2">
+              <TabsTrigger value="softphone" class="flex items-center gap-2" @click="openDrawer('softphone')">
+                <Phone class="h-4 w-4" />
+                Softphone
+                <span
+                  class="inline-flex h-2 w-2 rounded-full"
+                  :class="softphone.isConnected.value ? 'bg-emerald-500' : 'bg-muted-foreground/40'"
+                />
+              </TabsTrigger>
+              <TabsTrigger value="ai" class="flex items-center gap-2" @click="openDrawer('ai')">
+                <Sparkles class="h-4 w-4" />
+                AI Agent
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+        </div>
+        
 
         <div
           class="flex h-6 flex-1 cursor-row-resize items-center justify-center"
@@ -221,11 +226,15 @@ onBeforeUnmount(() => {
         >
           <span class="h-1.5 w-12 rounded-full bg-muted" />
         </div>
-        <Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
-          <X v-if="isDrawerOpen" class="h-4 w-4" />
-          <ChevronUp v-else class="h-4 w-4" />
-          <span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
-        </Button>
+
+        <div class="flex col-start-3 justify-end">
+          <Button variant="ghost" size="icon" class="ml-3" @click="isDrawerOpen ? minimizeDrawer() : openDrawer()">
+            <X v-if="isDrawerOpen" class="h-4 w-4" />
+            <ChevronUp v-else class="h-4 w-4" />
+            <span class="sr-only">{{ isDrawerOpen ? 'Minimize drawer' : 'Expand drawer' }}</span>
+          </Button>
+        </div>
+
       </div>
 
       <Tabs v-if="isDrawerOpen" v-model="activeTab" class="flex h-full flex-col border-t">
@@ -422,8 +431,8 @@ onBeforeUnmount(() => {
             </div>
           </TabsContent>
 
-          <TabsContent value="ai" class="h-full">
-            <div class="flex h-full flex-col justify-end">
+          <TabsContent value="ai" class="h-full relative">
+            <div class="flex flex-col justify-end absolute bottom-0 w-full">
               <AIChatBar />
             </div>
           </TabsContent>