From 01ea9021560c4bf67e7eea6d2be9f8192951d98b Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Sun, 3 May 2026 18:21:48 +0000
Subject: [PATCH] fix(ui): stack agent dropdown items vertically to stop
 multi-line wrapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous layout used `justify-between` with the board name and the
prefix·hint hint on the same row. With Hebrew labels + the long hint
"תיקי 8xxx / 9xxx" the row overflowed the 220px content and wrapped the
hint into 2-3 lines, breaking visual alignment.

Stacks each item now: bold board name on top, dim prefix·hint underneath.
Adds whitespace-nowrap to both lines and bumps min-width to 240px so the
content drives the dropdown width instead of fighting it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web-ui/src/components/app-shell.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-ui/src/components/app-shell.tsx b/web-ui/src/components/app-shell.tsx
index a416df8..76354e7 100644
--- a/web-ui/src/components/app-shell.tsx
+++ b/web-ui/src/components/app-shell.tsx
@@ -119,7 +119,7 @@ export function AppShell({ children }: { children: ReactNode }) {
               <ChevronDown className="size-4 self-center text-gold-soft" aria-hidden="true" />
             </DropdownMenuTrigger>
 
-            <DropdownMenuContent align="end" sideOffset={10} className="min-w-[220px]">
+            <DropdownMenuContent align="end" sideOffset={10} className="min-w-[240px]">
               <DropdownMenuLabel className="text-xs text-muted-foreground">
                 פתח דאשבורד Paperclip
               </DropdownMenuLabel>
@@ -130,11 +130,11 @@ export function AppShell({ children }: { children: ReactNode }) {
                     href={`${PAPERCLIP_BASE}/${board.prefix}/dashboard`}
                     target="_blank"
                     rel="noreferrer noopener"
-                    className="flex items-baseline justify-between gap-3 cursor-pointer"
+                    className="flex flex-col gap-0.5 cursor-pointer py-1.5"
                   >
-                    <span className="font-medium">{board.label}</span>
-                    <span className="text-xs text-muted-foreground tracking-wide">
-                      {board.prefix} · {board.hint}
+                    <span className="font-medium whitespace-nowrap">{board.label}</span>
+                    <span className="text-xs text-muted-foreground tracking-wide whitespace-nowrap">
+                      <span className="font-mono">{board.prefix}</span> · {board.hint}
                     </span>
                   </a>
                 </DropdownMenuItem>