From 2f1e1b5f3f149c50da060aa14fea6b92e0f0eb01 Mon Sep 17 00:00:00 2001 From: Matt Date: Fri, 22 May 2026 14:02:57 +0200 Subject: [PATCH] fix(layout): unblock tablet topbar trigger + un-crush 1024 dashboard title MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/components/layout/topbar.tsx | 16 +++++++++++++--- src/components/shared/page-header.tsx | 19 +++++++++++-------- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx index 4088783f..5ba5b563 100644 --- a/src/components/layout/topbar.tsx +++ b/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. -
+ // + // 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. +
{/* LEFT: optional sidebar trigger (tablet) + optional back button + breadcrumbs */}
{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. */}
-
+
diff --git a/src/components/shared/page-header.tsx b/src/components/shared/page-header.tsx index 5de5dac0..8501f153 100644 --- a/src/components/shared/page-header.tsx +++ b/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. */}
{actions ? ( -
{actions}
+
{actions}
) : null}