Repository navigation
feat(docs): match the homepage's widths and spacing to the updated mock - #239
Merged
hunterbecton merged 1 commit intoOct 9, 2026
Conversation
The updated mock caps the intro and the favorites at 1440px, the width the features section already uses, and gives the hero, the favorites, and the footer more vertical space. - The intro row caps at --container-8xl, up from --container-7xl, so the lede wraps to two lines at full width. - The hero section's bottom padding grows from 32px to 48px. - The favorites grid caps itself at 1440px in place of the 1664px site container, and the section's padding grows from 32px to 48px. - The footer's top padding grows from 32px to 96px, and its container drops its own 32px on top. Comments that cited the old widths and gaps now cite the new ones. The phone values are unchanged. FavoritesReveal's className is now optional, because a CSS module class is typed string | undefined.
Contributor
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The width and spacing calculations are internally consistent, with existing phone overrides preserved.
0 open findings
What changed in this PR
Aligns homepage widths and spacing with the updated mock while preserving phone layouts.
Changes:
- Caps intro, favorites, and features at 1440px.
- Increases desktop spacing around the hero, favorites, and footer.
- Updates related comments and allows an optional reveal class.
| File | Description |
|---|---|
scripts/build-posters.sh |
Corrects the favorites scene-size comment. |
apps/docs/src/components/home-hero/home-hero.module.css |
Increases hero bottom padding. |
apps/docs/src/components/home-footer/home-footer.module.css |
Revises footer spacing. |
apps/docs/src/components/features/features.module.css |
Updates alignment documentation. |
apps/docs/src/components/favorites/favorites.tsx |
Removes the wider shared container class. |
apps/docs/src/components/favorites/favorites.module.css |
Adds the 1440px cap and spacing. |
apps/docs/src/components/favorites/favorites-reveal.tsx |
Makes className optional. |
apps/docs/src/components/favorites/favorites-list.tsx |
Documents scene scaling behavior. |
apps/docs/src/app/page.module.css |
Expands the intro width to 1440px. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
hunterbecton
deleted the
hunter/sha-218-match-the-homepages-widths-and-spacing-to-the-updated-mock
branch
October 9, 2026 17:52
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.
Why
The updated homepage mock caps the intro and the favorites at 1440px, and it gives the hero, the favorites, and the footer more vertical space. At full width the favorites ran wider than the features section under them, and the lede wrapped to three lines instead of two. SHA-218.
What changes
Widths
The intro row and the favorites grid cap at 1440px (
--container-8xl), the width the features section already uses, so the three sections line up at every width. The favorites grid sets its own cap in place of the 1664px.site-container. At full width the lede gets 523px and wraps to two lines, as in the mock. The hero keeps the mock's 1664px.Spacing
The hero section's bottom padding grows from 32px to 48px, and the favorites section's padding from 32px to 48px above and below. The footer's top padding grows from 32px to 96px, and its container drops its own 32px on top. At 1728px that puts 96px between the hero's frame and the favorites, 96px between the favorites and the features heading, and 144px between the features grid and the wordmark, as the mock does. The phone values are unchanged.
Comments and one type
Comments that cited the old widths and gaps now cite the new ones, including the one above
SCENE_SIZE, which no longer equals the card window.FavoritesReveal'sclassNameis optional now, because a CSS module class is typedstring | undefined.Known limitations