fix(landing): release banner — single inline row on mobile#110
Closed
bigpuritz wants to merge 1 commit into
Closed
fix(landing): release banner — single inline row on mobile#110bigpuritz wants to merge 1 commit into
bigpuritz wants to merge 1 commit into
Conversation
Mobile (≤720px) was stacking the version on its own line and then wrapping the three link labels onto multiple rows because each link carried its eyebrow row plus a NE-arrow glyph. On a 375px iPhone viewport it ate four rows of vertical space and read as a broken layout. Rebuild the mobile branch as a single inline-flex row: - `.release-banner-inner` switches from grid to `display: flex` with `flex-wrap: wrap` and baseline alignment. Padding tightens to `0.7rem 1rem` to claw back horizontal room. - `.release-banner-cell--statement` and `.release-banner-nav` are set to `display: contents` so their wrappers vanish from the layout tree — the version span and the three link `<a>` elements become direct flex siblings of `.release-banner-inner`. Result: one flex row of four items (`version │ link │ link │ link`) instead of the previous two-row stack. - The eyebrows (`GITHUB`, `DOCKER HUB`, `OPERATORS`) and the NE-arrow SVG are `display: none` on mobile — they are pure noise at this width, the link label itself carries the destination. - Version font drops from clamp(1.5rem,…,2rem) to a flat `1rem` on mobile so even iPhone SE (~320px content width) fits the whole row without wrap. - Every link, including the first, gets a left hairline rule on mobile (the desktop "first child has no border" reset is inverted) so the row reads as `version │ link │ link │ link`. - `.release-banner-link-label` becomes `white-space: nowrap` so individual labels stay single-line; flex-wrap stays available as a safety net for extreme viewports but should not trigger in practice. Desktop layout unchanged — the existing two-row eyebrow + label structure with NE-arrow hover still ships at >720px. Refs #91, #94 (previous banner iterations).
Contributor
Author
|
Superseded by #111 — the mobile single-row reshape was cherry-picked into the eyebrow-gap branch so a single PR carries both banner-polish changes (eyebrow gap on desktop, single-row layout on mobile). |
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
1 participant
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.
On iPhone (≤720px) the release banner was stacking the version on its own line and wrapping the three link labels onto multiple rows because each link carried an eyebrow row + NE-arrow glyph. On a 375px viewport that consumed four lines of vertical space and read as broken layout.
This PR rebuilds the mobile branch as a single inline-flex row:
How it works
Two non-obvious moves to fit everything on one line:
display: contentson the cell wrappers..release-banner-cell--statementand.release-banner-navcollapse out of the layout tree on mobile, so the version span and the three link<a>elements become direct flex siblings of.release-banner-inner. The desktop two-row grid disappears; one flex row of four items takes its place.Eyebrows + arrows hidden on mobile.
GITHUB/DOCKER HUB/OPERATORSand the NE-arrow SVG are pure noise at this width — the link label itself ("Release notes" etc.) carries the destination. Removing them frees enough horizontal space that even iPhone SE (~320px content) fits the whole row.Plus a few small numeric tweaks: version font drops from
clamp(1.5rem, …, 2rem)to a flat1remon mobile; padding tightens to0.7rem 1rem; every link including the first gets a left hairline rule so the row reads cleanly asversion │ link │ link │ link;.release-banner-link-labeliswhite-space: nowrapso individual labels never break.flex-wrap: wrapstays as a safety net for extreme viewports but should not trigger in practice on any current iPhone.Desktop unchanged
Above 720px the existing two-row eyebrow + label structure with the NE-arrow hover lift continues to ship — this is purely a mobile reshape.
Test plan
npm run formatcleannpm run format:checkcleannpm run buildclean (33 pages, no drift)1.0.0 │ Release notes │ Container image │ Upgrade notes. Tap each link to confirm the underlying URLs are unchanged.