From 6963d1e234d1025859f76b181cff7dbf1380c4b5 Mon Sep 17 00:00:00 2001
From: Zoe <62722391+juls0730@users.noreply.github.com>
Date: Thu, 26 Feb 2026 10:27:25 -0600
Subject: [PATCH] fix: agent header doesnt shrink properly, so chevrons are
 sometimes obscured

---
 app/components/Sidenav/HeaderAgent.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/Sidenav/HeaderAgent.vue b/app/components/Sidenav/HeaderAgent.vue
index 76e3dd6..040f17d 100644
--- a/app/components/Sidenav/HeaderAgent.vue
+++ b/app/components/Sidenav/HeaderAgent.vue
@@ -33,7 +33,7 @@ const toggleDropdown = (e: MouseEvent) => {
 </script>
 
 <template>
-    <header class="flex items-center rounded-lg overflow-hidden">
+    <header class="flex items-center rounded-lg overflow-hidden flex-1 min-w-0">
         <div :style="isHovered ? 'width: 32px;' : 'width: 0px;'"
             :class="['flex flex-shrink-0 transform-origin-left-center items-center overflow-hidden transition-all duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]', isHovered ? 'opacity-100 scale-100' : 'opacity-0 scale-95']">
             <NuxtLink to="/"
@@ -43,7 +43,7 @@ const toggleDropdown = (e: MouseEvent) => {
         </div>
 
         <button
-            class="max-w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
+            class="shrink-1 max-w-full min-w-0 w-full transition duration-200 pr-2 cursor-pointer hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] rounded-lg"
             @click="toggleDropdown">
             <div class="pointer-events-none flex items-center gap-1.5 max-w-full">
                 <div
@@ -52,10 +52,10 @@ const toggleDropdown = (e: MouseEvent) => {
                     <Icon v-else name="mynaui:check-hexagon" class="w-4 h-4 text-[var(--color-accent)]" />
                 </div>
                 <span
-                    class="text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
+                    class="min-w-0 text-sm font-medium text-ellipsis overflow-hidden text-[var(--text-primary)] whitespace-nowrap">
                     {{ activeAgent?.name }}
                 </span>
-                <div class="w-4 h-4 text-[var(--text-secondary)]">
+                <div class="shrink-0 w-4 h-4 text-[var(--text-secondary)]">
                     <Icon
                         class="text-4 transform-origin-center-left duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)] transition-all"
                         name="mynaui:chevron-up-down" />