From b2985f88de6a6a1b19681e4643a17a10cbf2b89b Mon Sep 17 00:00:00 2001
From: Chaim <chaim@marcus-law.co.il>
Date: Sun, 3 May 2026 18:32:31 +0000
Subject: [PATCH] fix(ui): use 3-column grid in header Row 1 for true
 viewport-centered search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous flex layout used `flex-1` on the search wrapper, which
centers the search relative to the *remaining* space — so as the brand
subtitle grows ("עוזר משפטי · ערר 8137-24 · ניסוח") or the agent
trigger label changes, the search drifts off-center.

Switches Row 1 to `grid-cols-[minmax(0,1fr)_minmax(280px,460px)_minmax(0,1fr)]`:
brand on the right, search in the middle (anchored to the viewport
midpoint), agent dropdown on the left. The side cells flex equally so
the center stays put regardless of side content width.

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

diff --git a/web-ui/src/components/app-shell.tsx b/web-ui/src/components/app-shell.tsx
index 76354e7..0f68319 100644
--- a/web-ui/src/components/app-shell.tsx
+++ b/web-ui/src/components/app-shell.tsx
@@ -87,25 +87,33 @@ export function AppShell({ children }: { children: ReactNode }) {
           shadow-md
         "
       >
-        {/* ─── Row 1 — brand bar ─── */}
-        <div className="flex items-center gap-4 px-10 pt-[14px] pb-2">
-          <Link href="/" className="flex items-baseline gap-3 hover:text-parchment shrink-0">
-            <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
+        {/* ─── Row 1 — brand bar (3-column grid) ─── */}
+        {/* Side columns flex 1fr each so the search column stays centered on
+            the viewport regardless of how wide the brand or agent labels grow. */}
+        <div className="grid grid-cols-[minmax(0,1fr)_minmax(280px,460px)_minmax(0,1fr)] items-center gap-4 px-10 pt-[14px] pb-2">
+          <Link
+            href="/"
+            className="flex items-baseline gap-3 hover:text-parchment min-w-0 justify-self-start"
+          >
+            <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment whitespace-nowrap">
               עוזר משפטי
             </span>
-            <span className="text-gold-soft text-sm font-medium" aria-live="polite">
+            <span
+              className="text-gold-soft text-sm font-medium truncate"
+              aria-live="polite"
+            >
               {subtitle}
             </span>
           </Link>
 
-          <div className="flex-1 min-w-0 max-w-[460px] mx-4 flex justify-center">
+          <div className="w-full justify-self-center">
             <GlobalSearch />
           </div>
 
           <DropdownMenu>
             <DropdownMenuTrigger
               className="
-                shrink-0 flex items-baseline gap-2 px-3 py-1.5 rounded
+                justify-self-end flex items-baseline gap-2 px-3 py-1.5 rounded
                 transition-colors outline-none
                 text-parchment/80 hover:text-parchment hover:bg-navy-soft/60
                 focus-visible:ring-2 focus-visible:ring-gold/60
@@ -113,7 +121,7 @@ export function AppShell({ children }: { children: ReactNode }) {
               "
               aria-label="ניהול סוכנים — בחר ועדה"
             >
-              <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
+              <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment whitespace-nowrap">
                 ניהול סוכנים
               </span>
               <ChevronDown className="size-4 self-center text-gold-soft" aria-hidden="true" />