Repository navigation
[Claude first-pass] Fix PageHeader collapsed action alignment, phantom gap, clip - #346
Draft
claude[bot] wants to merge 1 commit into
Draft
claude[bot] wants to merge 1 commit into
claude[bot] wants to merge 1 commit into
Conversation
…m gap, clip Addresses the three findings from the Fable review in #345: 1. ml-auto on the action Reveal right-aligns a wrapped action under the description (it shrink-wraps to its own line, so justify-between alone left it at the h1's left edge); no-op when the action stays on the row. 2. Row gap drops to gap-y-0 while collapsed and tweens via transition-[row-gap] so the 0px-tall-but-still-wrapped action line stops leaving a phantom 12px band under the h1. 3. A few px of translate-y alongside the Reveal's opacity so the overflow clip reads as a slide rather than a mid-glyph horizontal cut in the first frames. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
Visual regression report26 changed · 0 added · 0 removed · 3114 unchanged
Next steps
Want to look first? Download the visual report, unzip it, and open Approve by comment insteadPost one of these as a PR comment (from an account with write access): Pinned to exactly this commit: Or approve screenshots individually (edit to taste): No approvals workflow installed? Checkbox and commands still count — use "Re-run failed jobs" afterwards. 📦 Download the full visual report (artifact Baseline from this run · commit |
This branch has not been deployed
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
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.
What this fixes
First-pass fix for the three findings in #345 (Fable design review of
PageHeader collapsed+Reveal).1. Wrapped action now right-aligns. Added
className="ml-auto"to the actionReveal. When the action wraps to its own line it shrink-wraps, sojustify-betweenon the header row landed it flush with the h1's left edge.ml-autoabsorbs the leading free space and pushes it right under the description. In the single-line case the row already right-aligns the action, soml-autois a no-op there.2. Phantom 12px row gap while collapsed. The collapsed action
Revealis 0px tall but is still a wrapped flex line, so the row'sgap-y-3survived the tuck (the 96px-vs-84px band in the report). The header row now usesgap-y-0whencollapsedandgap-y-3otherwise, withtransition-[row-gap] duration-base ease-out-cubicso the gap opens/closes with the action instead of snapping.3. Mid-glyph clip on collapse/expand. Took the optional suggestion: the
Revealinner now transitionstransformalongsideopacityand carries a 4px-translate-y-1while closed, so theoverflow-hiddenclip reads as a slide rather than a horizontal cut through the glyphs in the first frames. Steady states (translate-y-0when open; inert 0-height when closed) are unchanged.What I verified
npm run typecheck,npm run lint,npm run build— all pass.prettier --checkon both touched files — clean.page-header.test.tsxandreveal.test.tsx— 5/5 pass.What a reviewer should double-check
visual-regressionbaselines. Changes 1 and 2 only move pixels in the collapsed + wrapped-action configuration, which no existing story exercises (stories use single-button actions and mostly the open state), so I'd expect baselines to hold — but verify at 1280px and 390px, light and dark, per the report.Reveal, so it also affectsPageSubheader's expand/collapse. The translate is steady-state-neutral, but please eyeball the subheader animation to confirm the 4px slide feels right there too and doesn't nudge theborder-trule noticeably.-translate-y-1(4px) is the right amount — "a few px" per the issue; easy to dial to-translate-y-0.5.Closes #345
🤖 Generated with Claude Code