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/shared/page-header.tsx

@@ -46,18 +46,21 @@ export function PageHeader({
       ) : null}
 
       {/* Tablet + desktop: full strip with title, eyebrow, description, kpi line, actions.
-          Stacks vertically at sm (640px) up to lg (1024px) so the title
-          doesn't get truncated next to a wide actions row on tablet — the
-          previous `sm:flex-row sm:flex-nowrap` forced four-button toolbars
-          (e.g. the dashboard's DateRange + ExportPdf + Rearrange + Customize)
-          onto one row at 768px, crushing the title. At lg+ the row layout
-          returns. */}
+          Stacks vertically at sm (640px) up to xl (1280px). The earlier
+          revision moved the stack point from sm to lg, which fixed the
+          tablet (768) 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 four-button action row in only ~720px of content. Moving
+          to xl (1280) means the strip stays stacked through tablet AND
+          the narrowest desktop width; horizontal layout returns once
+          there's actual room. */}
       <div
         className={cn(
           // Removed `sm:mb-6` - the parent shell already provides
           // appropriate gap-y between header and the next section, and the
           // double-spacing produced an oversized top margin on dashboards.
-          'hidden sm:flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between lg:gap-4',
+          'hidden sm:flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between xl:gap-4',
           isGradient &&
             'rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs',
           className,
@@ -85,7 +88,7 @@ export function PageHeader({
           ) : null}
         </div>
         {actions ? (
-          <div className="flex shrink-0 flex-wrap items-center gap-2 lg:flex-nowrap">{actions}</div>
+          <div className="flex shrink-0 flex-wrap items-center gap-2 xl:flex-nowrap">{actions}</div>
         ) : null}
       </div>
     </>