From fc502003d35b0b85552f05e330de65b46d351bb0 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 18 May 2026 23:50:02 +0000 Subject: [PATCH] fix(ui): SectionHeader stacks vertically on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tests/smoke/responsive-layout.spec.ts:192 fails at the 375px mobile viewport with `expect(getByText('Analysis Results')).toBeVisible()` resolving to a hidden h2. Root cause: my D.5a migration replaced the original `flex flex-col md:flex-row` layout for the Analysis Results page header with the SectionHeader primitive which used `flex items-center justify-between` unconditionally. At 375px the two Download buttons (~280px combined) squeeze the title to zero width and the parent `.ableton-shell overflow-hidden` clips the title off-screen, so Playwright sees it as hidden. Restore the responsive collapse: mobile-first `flex flex-col items-start gap-2`, then `md:flex-row md:items-center md:justify-between md:gap-3` at the 768px+ breakpoint. Matches the pre-D.5a Analysis Results header behavior. Other consumers of SectionHeader (the many ResultsSectionHeader call sites) have small rightSlot content (badges, single pills, icons) — stacking those below the title on mobile is a tiny visual improvement, not a regression. This is the failure that's been blocking #79, #80, #81, #82 — none of those PRs introduced the bug; they all inherit it from main because D.5a (#71) landed this regression. The fact that #71 itself merged green is either CI luck (the test passed on its first run) or the test was added later and not re-checked. Landing this hotfix lets the four open PRs rebase and pick up the fix to clear their CI. Verified: lint clean, 628/628 unit tests passing, build clean. https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe --- apps/ui/src/components/ui/SectionHeader.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/apps/ui/src/components/ui/SectionHeader.tsx b/apps/ui/src/components/ui/SectionHeader.tsx index 63c6e643..5d2de76b 100644 --- a/apps/ui/src/components/ui/SectionHeader.tsx +++ b/apps/ui/src/components/ui/SectionHeader.tsx @@ -6,7 +6,15 @@ import { cn } from './cn'; import { LedIndicator } from './LedIndicator'; import type { Tone } from './variants'; -const sectionHeaderVariants = cva('flex items-center justify-between gap-3', { +// Mobile-first layout: stack title and action vertically on narrow +// viewports, then break to horizontal at md (768px). This restores the +// pre-D.5a behavior where the Analysis Results header collapsed to +// `flex-col` at 375px so the title wasn't squeezed off-screen by the +// Download buttons. The mobile failure was caught by +// tests/smoke/responsive-layout.spec.ts:192 which asserts the +// "Analysis Results" h2 is visible at 375px — the parent shell's +// overflow-hidden was clipping the overflowing title. +const sectionHeaderVariants = cva('flex flex-col items-start gap-2 md:flex-row md:items-center md:justify-between md:gap-3', { variants: { variant: { inline: '',