fix(layout): unblock tablet topbar trigger + un-crush 1024 dashboard title

Two Bucket 1 quick-fixes from the 2026-05-22 visual audit, both
1-2-line CSS changes with outsized visual impact.

PageHeader stack point: lg → xl
The earlier sm → lg revision (commit 6d665d0) fixed the 768 tablet
crush but introduced a SECOND crush at exactly 1024: that's where
the desktop shell mounts (sidebar = 256px) AND lg:flex-row kicks
in, leaving the title cell to compete with a 4-button action row
in only ~720px of content. Title degraded to "(" and "Last 30
days" wrapped three-deep ("Last / 30 / days"). Moving to xl
(1280) keeps the strip stacked through tablet AND the narrowest
desktop width. Verified via Playwright at 1024 — title now reads
cleanly with the action row stacked below.

Topbar tablet logo trigger:
AppShell mounts a logo button in Topbar's leadingSlot prop on
tablet (the design intent: click logo → sidebar Sheet slides in).
Live screenshot at 768 showed zero affordance — search bar started
at the very left edge of the visible viewport. Two root causes,
both fixed:
- center grid column was minmax(420px, 800px) which starved the
  left column to ~100px at 768 width (no sidebar present).
  Changed to minmax(280px, 800px) at base, minmax(420px, 800px)
  only at lg+.
- search container had unconditional sm:-translate-x-...
  shifting it 128px LEFT to compensate for a sidebar that isn't
  present at tablet, pulling the search input over the leading-
  slot. Gated the translate to lg: so it only kicks in when the
  sidebar is actually inline.

Verified via Playwright at 768 — hamburger icon now appears in
the top-left corner; search bar sits to its right without overlap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/layout/topbar.tsx

@@ -59,7 +59,13 @@ export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
     // Three-column grid: breadcrumbs left, search center, actions right.
     // The brand logo lives in the sidebar header (per design feedback) so the
     // topbar center is dedicated to the global search bar.
-    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(420px,800px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0">
+    //
+    // Center column min-width: 280 at tablet, 420 at lg+. The earlier
+    // single 420 min starved the left column to ~100px at 768 viewport
+    // width (when the sidebar is hidden under a Sheet on tablet) — that
+    // was hiding the new logo-trigger leadingSlot AppShell mounts. Two
+    // breakpoints split the difference cleanly.
+    <header className="grid h-14 grid-cols-[minmax(0,1fr)_minmax(280px,800px)_minmax(0,1fr)] items-center border-b border-border bg-background gap-3 px-4 shrink-0 lg:grid-cols-[minmax(0,1fr)_minmax(420px,800px)_minmax(0,1fr)]">
       {/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
       <div className="min-w-0 flex items-center gap-1.5">
         {leadingSlot}
@@ -85,9 +91,13 @@ export function Topbar({ ports, user, leadingSlot }: TopbarProps) {
           translate-X that shifts left by half the sidebar width.
           Without the translate the topbar's grid centers inside the
           area-after-the-sidebar, so the search visually drifts right
-          by half the sidebar width. */}
+          by half the sidebar width.
+          The translate is gated to `lg:` because at tablet (768-1023)
+          the sidebar is HIDDEN behind a Sheet — translating left there
+          shifts the search into the leading-slot column, hiding the
+          AppShell-mounted logo trigger. */}
       <div className="flex items-center justify-center min-w-0">
-        <div className="w-full max-w-2xl mx-auto min-w-0 sm:-translate-x-[calc(var(--width-sidebar)/2)]">
+        <div className="w-full max-w-2xl mx-auto min-w-0 lg:-translate-x-[calc(var(--width-sidebar)/2)]">
           <CommandSearch />
         </div>
       </div>