fix(landing): release banner — wider RELEASE/version gap (desktop) + single inline row (mobile)#111
Merged
Merged
Conversation
The default 0.2rem gap on .release-banner-cell works for the nav links because their eyebrow and label are typographically close in weight. The statement cell pairs a 0.7rem mono caps eyebrow with an Inter 800 version that is roughly 3× taller — at that ratio the default gap reads as cramped, with the eyebrow visually crashing into the version glyphs. Override `.release-banner-cell--statement` with a `gap: 0.55rem` (~9px) so the eyebrow has clear separation from the version without floating loose. Nav links keep their tighter 0.2rem gap. Refs #91 (banner redesign).
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).
6 tasks
bigpuritz
changed the title
The previous mobile fix hid the nav-link eyebrows
(GITHUB / DOCKER HUB / OPERATORS) but kept the statement-cell eyebrow
("RELEASE") visible. On iPhone 14 Pro Max (~430px viewport) the
combined width of `RELEASE 1.0.0 │ Release notes │ Container image │
Upgrade notes` plus paddings still overflowed and wrapped "Upgrade
notes" to a second line.
Two changes:
- Add `.release-banner-eyebrow` to the mobile `display: none` rule
alongside the link eyebrows. The version glyphs alone communicate
"release" in the banner context — the explicit "RELEASE" eyebrow
is desktop-only typographic accent.
- Tighten link / version paddings from 0.55rem to 0.4rem so the
remaining items breathe but pack tighter. Saves another ~10px
across the row.
Mobile now reads as one line `1.0.0 │ Release notes │ Container
image │ Upgrade notes` on every modern iPhone viewport.
Refs #91, #94 (banner iterations).
Previous mobile fix sized for iPhone 14 Pro Max (~430px content area) and overflowed by ~25px on iPhone SE (375px viewport, ~343px content area), wrapping "Upgrade notes" to a second line. Three coordinated tightenings, ~20px saved across the row: - Container horizontal padding 1rem → 0.85rem (saves ~5px total). - Link + version inter-item padding 0.4rem → 0.3rem (saves ~10px across the four padding pairs). - Link label font-size 0.78rem → 0.72rem (saves ~5-6px). 0.72rem (~11.5px) is the floor for Inter 500 to still scan cleanly; going smaller starts to look mistreated. Letter-spacing -0.005em adds the extra hairline of legibility back at the smaller size. Mobile now renders a single line `1.0.0 │ Release notes │ Container image │ Upgrade notes` from iPhone SE (375px) up through iPhone Pro Max (~430px). Larger viewports get slightly more whitespace, which is acceptable. Refs #91 (banner redesign).
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.
Two related banner-polish changes consolidated in one PR (replaces #110, which is now closed):
1. Desktop — wider gap between
RELEASEeyebrow and version (e665c4e)The default
0.2remgap on.release-banner-cellworks for the nav links because their eyebrow + label are typographically close in weight. The statement cell pairs a0.7remmono-caps eyebrow with an Inter 800 version that is roughly 3× taller — at that ratio the same gap reads as cramped, with the eyebrow visually crashing into the version glyphs.Override on
.release-banner-cell--statement:gap: 0.55rem(~9px). Nav links keep their tighter0.2remgap.2. Mobile — single inline row (
05737d2, cherry-picked from #110)On iPhone (≤720px) the 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.
Mobile rebuild as a single inline-flex row:
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>s become direct flex siblings.GITHUB/DOCKER HUB/OPERATORSand the NE-arrow SVG are pure noise at this width; the link labels carry the destination.Plus: version font drops from
clamp(1.5rem, …, 2rem)to flat1remon mobile, padding tightens to0.7rem 1rem, every link including the first gets a left hairline rule (desktop "first child no border" reset is inverted),white-space: nowrapon labels prevents wrap.Desktop layout above 720px is unchanged.
Test plan
npm run formatcleannpm run buildclean (33 pages, no drift)RELEASEand1.0.0now read as two clearly separated typographic items.1.0.0 │ Release notes │ Container image │ Upgrade notes. Tap each link to confirm URLs unchanged. Check both light and dark themes.