From 09f0ee24255f2fdfef9c47b1d19cc9aed1908f97 Mon Sep 17 00:00:00 2001
From: Gagancreates <gaganp000999@gmail.com>
Date: Mon, 8 Jun 2026 00:15:04 +0530
Subject: [PATCH] fix: prevent chat bar model selector from overflowing in
 narrow panel

---
 .../src/components/chat-input-with-mentions.tsx        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx
index a7d548ea..706d62d8 100644
--- a/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx
+++ b/apps/x/apps/renderer/src/components/chat-input-with-mentions.tsx
@@ -992,22 +992,22 @@ function ChatInputInner({
         <div className="flex-1" />
         {lockedModel ? (
           <span
-            className="flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-xs text-muted-foreground"
+            className="flex h-7 min-w-0 items-center gap-1 rounded-full px-2 text-xs text-muted-foreground"
             title={`${providerDisplayNames[lockedModel.provider] || lockedModel.provider} — fixed for this chat`}
           >
-            <span className="max-w-[150px] truncate">{getSelectedModelDisplayName(lockedModel.model)}</span>
+            <span className="min-w-0 truncate">{getSelectedModelDisplayName(lockedModel.model)}</span>
           </span>
         ) : configuredModels.length > 0 ? (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button
                 type="button"
-                className="flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                className="flex h-7 min-w-0 items-center gap-1 rounded-full px-2 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
               >
-                <span className="max-w-[150px] truncate">
+                <span className="min-w-0 truncate">
                   {getSelectedModelDisplayName(configuredModels.find((m) => `${m.provider}/${m.model}` === activeModelKey)?.model || configuredModels[0]?.model || 'Model')}
                 </span>
-                <ChevronDown className="h-3 w-3" />
+                <ChevronDown className="h-3 w-3 shrink-0" />
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">