fix(ui): use 3-column grid in header Row 1 for true viewport-centered search

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

@@ -87,25 +87,33 @@ export function AppShell({ children }: { children: ReactNode }) {
           shadow-md
         "
       >
-        {/* ─── Row 1 — brand bar ─── */}
+        {/* ─── Row 1 — brand bar (3-column grid) ─── */}
-        <div className="flex items-center gap-4 px-10 pt-[14px] pb-2">
+        {/* Side columns flex 1fr each so the search column stays centered on
-          <Link href="/" className="flex items-baseline gap-3 hover:text-parchment shrink-0">
+            the viewport regardless of how wide the brand or agent labels grow. */}
-            <span className="font-display text-[1.45rem] font-bold tracking-[0.02em] text-parchment">
+        <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" />