fix(hero): stack feature grid to one column on phones#24
Merged
Conversation
At <=520px the 2x2 feature grid clipped the right column's descriptions —
the cells' side padding (14px each) plus gaps pushed two columns past ~390px,
and .feature-grid's overflow:hidden cut the text ('one shared runtime.',
'yours to extend.') at the viewport edge.
Drop to a single column at the <=520px breakpoint so cells are full-width and
descriptions wrap cleanly on any phone. The 2x2 layout is retained for the
521-640px range where it still fits.
Verified with true-mobile screenshots (headless=new, dpr=2): 390px shows a clean
single column with full descriptions; 560px keeps 2x2 with no clipping.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adjusts the hero section’s responsive CSS to prevent the feature grid’s right column descriptions from being clipped on very small phone widths by switching the grid to a single column at ≤520px.
Changes:
- Change
.feature-gridto a single-column layout under@media (max-width: 520px)to avoid text clipping. - Add an explanatory comment documenting the underlying sizing/overflow cause.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+928
to
929
| .feature-grid { grid-template-columns: 1fr; } | ||
| .proof-grid { grid-template-columns: 1fr 1fr; } |
BunsDev
added a commit
that referenced
this pull request
Jul 5, 2026
…trip below (#25) Reworks the hero so it fits within a single viewport (no scroll) on standard laptop heights, and swaps the two requested elements: - Copy + the platform-aware DownloadCTA now sit together on the LEFT. - The interactive 'coven cli' runtime card moves to the RIGHT. - The 4 core-capability cells are pulled OUT of the copy column into a slim full-width strip beneath the two-column main row (.hero-main), so neither column grows tall enough to force scrolling. Height work: - .hero is a centered flex column capped at calc(100vh - 72px) with tightened vertical rhythm (smaller headline clamp, trimmed margins/padding). - Hero collapses from ~1240px to ~640px: fits at 1440x900, 1366x768, and 1280x720 (verified, ~30px breathing room below the strip at the tight case). DownloadCTA tidy: - Button labels shortened (macOS / Windows / Linux / iOS Beta) to keep the row a stable single line; kept the 'All releases & checksums' utility link. - Dropped the redundant 'install the CLI' affordance — the coven cli card in the hero already demos the CLI — and removed the now-dead CSS/const/icon. - Detected platform is emphasized in place (violet) instead of being moved and spanned full-width, so the download row's height is deterministic. Mobile preserved: copy leads, CLI card below, feature grid stacks (2-col at <=900px, single column at <=520px per #24). No horizontal overflow (body keeps overflow-x:hidden; flex children min-width:0). Verified content fits with no right-edge clipping. Retitles/replaces the earlier column-mirror attempt (#23) with the intended element swap.
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.
Follow-up to the hero swap (#23). Fixes the mobile feature-grid clipping I flagged there.
The bug
At
≤520pxthe 2×2 feature grid clipped the right column's descriptions — the cells' side padding (14px each) + gaps pushed two columns past ~390px, and.feature-grid'soverflow: hiddencut the text at the viewport edge (e.g. "Multiple agents, one shared runtime." and "Open, inspectable, yours to extend." rendered truncated).The fix
Drop
.feature-gridto a single column at≤520pxso cells are full-width and descriptions wrap cleanly on any phone. The compact 2×2 layout is retained for the 521–640px range where it still fits. One-line change (+comment).Verified with true-mobile screenshots (
--headless=new, dpr=2)Note on process: my initial DOM measurement said the grid fit — but it was measuring at an inflated viewport (~465px, not 390). The
--headless=newscreenshot at true 390px showed the real clip. Trusted the screenshot, confirmed the fix against it.