From c24f9e5508e05cd8414c9d7a719de5dac5de1b84 Mon Sep 17 00:00:00 2001 From: Matt Date: Fri, 22 May 2026 14:04:05 +0200 Subject: [PATCH] docs(uat): annotate the two Bucket 1 layout fixes as SHIPPED in 2f1e1b5 PageHeader stack point + tablet topbar trigger fixes verified via Playwright re-screenshot at 768 + 1024. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/superpowers/audits/alpha-uat-master.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/superpowers/audits/alpha-uat-master.md b/docs/superpowers/audits/alpha-uat-master.md index 0f95e0c3..32ba7dab 100644 --- a/docs/superpowers/audits/alpha-uat-master.md +++ b/docs/superpowers/audits/alpha-uat-master.md @@ -23,8 +23,8 @@ _Copy tweaks, alignment, single-prop edits, obvious typos._ > **[Captured 2026-05-22 — visual breakpoint audit, 5 viewports × 20 surfaces via Playwright MCP. Screenshots local at `tmp/visual-audit-2026-05-22//.png`. Tablet tier (768-1023) infrastructure + dashboard PageHeader stacking shipped in `6d665d0`; findings below are the residue surfaced after that ship lit up the tier.]** > -> - **Tablet topbar logo trigger doesn't render visibly** — _src/components/layout/app-shell.tsx_ + _src/components/layout/topbar.tsx_ — AppShell mounts a logo button in Topbar's `leadingSlot` prop on tablet (the design intent: click logo → sidebar Sheet slides in). Live render at 768 shows zero affordance in the topbar's left column — only the truncated search-input placeholder is visible. Two likely causes (do both): (a) the topbar's center column is `minmax(420px, 800px)` which starves the left column to ~100px at 768 viewport width with no sidebar; (b) the search container has an unconditional `sm:-translate-x-[calc(var(--width-sidebar)/2)]` that shifts it 128px LEFT to visually-center against a sidebar that doesn't exist on tablet, pulling the search input over the leading-slot. Fix: (a) change center column to `minmax(280px, 600px)` AND (b) gate the translate to `lg:` so it only kicks in when the sidebar is actually present. ~30 min. Captured 2026-05-22 from visual audit. -> - **Dashboard title strip crushed at 1024 viewport** — _src/components/shared/page-header.tsx_ — at exactly 1024 the desktop shell mounts (sidebar takes 256px) AND `PageHeader`'s `lg:flex-row` kicks in, forcing the title cell to compete with the four-button action row (Today/7d/30d/90d/Custom + Export PDF + Rearrange + Customize). Title degrades to `(` and the "Last 30 days" subtitle wraps three-deep ("Last / 30 / days"). Move the horizontal-stack breakpoint from `lg:` to `xl:` so the strip stacks until 1280px, giving the actions row room to wrap without crushing the title at the tightest sidebar-present width. ~15 min. Captured 2026-05-22. +> - **SHIPPED in 2f1e1b5:** Tablet topbar logo trigger doesn't render visibly — center grid column changed to `minmax(280px, 800px)` at base with `lg:` override back to 420px min; search-container `sm:-translate-x-...` gated to `lg:` so it only kicks in when sidebar is inline. Verified at 768 — hamburger affordance visible top-left. +> - **SHIPPED in 2f1e1b5:** Dashboard title strip crushed at 1024 viewport — PageHeader horizontal-stack breakpoint moved from `lg:` (1024) to `xl:` (1280) so the strip stays stacked through tablet AND narrowest desktop width. Verified at 1024 — title reads cleanly with action row stacked below. > - **`useIsMobile()` returns `true` on tablet — call-site audit needed** — _src/hooks/use-is-mobile.ts_ + every component currently importing `useIsMobile` — the new `useViewportTier()` is the precise hook; `useIsMobile` was kept as `tier !== 'desktop'` for back-compat, which is what most call sites want ("show short stage labels", "stack vertically"). But a handful intend strict mobile-only behaviour (e.g. drawer-instead-of-popover, bottom-sheet picker) and should migrate to `useViewportTier() === 'mobile'`. Grep `useIsMobile` and triage each per actual intent. ~30 min for the audit + targeted migrations. Captured 2026-05-22. > **Outstanding quick-fixes (rapid UAT capture — not yet shipped):**