From 3d5b0cae8923a987f0adfef21084919f2b98b100 Mon Sep 17 00:00:00 2001
From: Pavel <pabin@yandex.ru>
Date: Sat, 26 Sep 2026 22:31:36 +0400
Subject: [PATCH] Button bug

---
 frontend/DESIGN.md                    | 8 ++++++--
 frontend/src/components/ui/button.tsx | 4 +++-
 frontend/src/settings/Prompts.tsx     | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index 9b62a9b3..9ae44f23 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -761,8 +761,12 @@ chevron keep their size, and only the name gives way (a `truncate` span with
 `title=` holding the full name). This is the rule for any Button that holds a
 user-supplied name (a chat, agent or source) in a flex row: Button's base is
 `shrink-0 whitespace-nowrap`, so `min-w-0` alone does nothing. Pass `min-w-0
-shrink` (or `flex-1` / `w-full` when it should fill the row) and put the name
-in the `truncate` span; its icons stay `shrink-0`.
+shrink` (or `flex-1` when it should fill the row) and put the name in the
+`truncate` span; its icons stay `shrink-0`. `w-full` doesn't count: a
+`w-full shrink-0` Button takes the whole row and pushes its neighbour out,
+under the next control (an `outline` Button's fill is translucent in dark, so
+it shows through there and hides in light). `variant="combobox"` already
+carries `min-w-0 shrink`, like the fields it sits among.
 
 New Chat is `SquarePen` everywhere: the phone bar, the sidebar's New Chat row
 and the collapsed rail. `Plus` means "add an item to this list", not "start
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 71357365..d327505d 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -42,8 +42,10 @@ const buttonVariants = cva(
         // variant below sets the row's own padding and radius.
         'sidebar-item':
           'text-foreground hover:bg-sidebar-accent aria-[current=page]:bg-sidebar-accent',
+        // A field, so it gives way in a row like Input and SelectTrigger do
+        // (the base is shrink-0), keeping a neighbour's edit button in view.
         combobox:
-          'border border-input bg-card font-normal shadow-xs hover:bg-accent data-placeholder:text-muted-foreground',
+          'min-w-0 shrink border border-input bg-card font-normal shadow-xs hover:bg-accent data-placeholder:text-muted-foreground',
         // Underline tabs (FilePicker's drives, the agent page sub-nav). Mark the
         // current tab with data-active; the 2px border is always there so the
         // row height doesn't move. The compound variant squares the corners.
diff --git a/frontend/src/settings/Prompts.tsx b/frontend/src/settings/Prompts.tsx
index a012b498..40039d43 100644
--- a/frontend/src/settings/Prompts.tsx
+++ b/frontend/src/settings/Prompts.tsx
@@ -286,7 +286,7 @@ export default function Prompts({
           aria-label={titleAs === 'heading' ? titleText : undefined}
           data-placeholder={selectedPrompt?.name ? undefined : ''}
           className={cn(
-            'w-full min-w-0 justify-between',
+            'w-full justify-between',
             titleAs === 'row' && 'sm:w-56',
           )}
         >