fix(ui): SectionHeader stacks vertically on mobile (unblocks #79-82) - #83
Merged
Merged
Conversation
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Hotfix for the smoke test breakage blocking #79, #80, #81, #82.
tests/smoke/responsive-layout.spec.ts:192fails at the 375px mobile viewport:Root cause
My D.5a migration (#71) replaced the original Analysis Results header — which used
flex flex-col md:flex-row— with theSectionHeaderprimitive whose layout was hardcoded toflex items-center justify-between gap-3. At 375px the two Download buttons (~280px combined width) squeeze the title flex column to zero, and the parent.ableton-shell overflow-hiddenclips the title off-screen. Playwright correctly reports it as hidden.Fix
SectionHeader now uses mobile-first responsive layout:
Matches the pre-D.5a Analysis Results behavior. Other consumers of
SectionHeader(the ResultsSectionHeader call sites) have small rightSlot content (badges, single pills, icons) — stacking those below the title on mobile is a minor visual nicety, not a regression.Why this snuck into main
D.5a (#71) landed the regression. Either #71's CI passed by luck on first run, or the responsive-layout smoke spec was added/updated after #71 merged. Either way, every PR branched off post-#71 main now inherits the failure — which is why my last four PRs all fail Frontend with the same fast (~2min) signature.
Cascade
Landing this lets #79 / #80 / #81 / #82 rebase and pick up the fix to clear CI.
Test plan
npm run lint— cleannpm run test:unit— 628/628 passingnpm run build— cleannpm run test:smoke— sandbox blocks Playwright browser; the fix is targeted exactly at the failing linehttps://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
Generated by Claude Code