Settle the newsletter signup into the page rhythm - #161
Merged
Conversation
The signup was capped at 720px inside a 960px column, so it sat narrower than the docs and support panels above and below it and read as a foreign block wedged between them. It was also the tallest thing on that stretch of the page for an optional action, and its button carried a "primary" class that Infima does not define, so it rendered unstyled. Drop the inline width cap and let the form be a direct child of main, so it inherits the same column as its neighbours. Lay it out as one horizontal strip -- copy on the left, field and button on the right -- and take the surface, border and light-theme treatment straight from SupportSection so the three blocks read as one family in both themes. The consent sentence is the bulk of the old height, and it only matters to someone about to submit: it now unfolds on the first focus of the field and stays reachable to screen readers via aria-describedby, which keeps the resting state a single line. The eyebrow duplicated the heading in a smaller font, so it goes, along with its now-dead key in all six locales. Verified against a production build: identical computed background, border and radius to the adjacent support panel in dark and light, no horizontal overflow at 375px, and a 16px field so iOS does not zoom. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
What changed
The newsletter signup on the home page no longer renders as a separate card. It is now a slim horizontal strip that matches the docs and support panels around it.
<section>capped at 720px inside a 960px column, with an extra 2.5rem of top padding. That is what made it visibly narrower and detached from its neighbours. The wrapper is gone;SubscribeFormis a direct child ofmainand inherits the same column (all five blocks measure 912px).SupportSection, so the computed background, border colour and radius are identical to the adjacent panel in both themes.aria-describedby. Resting height went from roughly 200px to 86px.className="button primary";primaryis not an Infima modifier, so it rendered essentially unstyled. Nowbutton button--primary button--sm, matching every other button on the site.newsletter.eyebrowstring duplicated the heading and is no longer rendered, so the key is removed from all six locales.Why
Reported visually: the signup stood out from the surrounding sections and was too heavy for an optional action.
Verification
tsc --noEmitclean,npm run buildpasses. Checked against the production build served locally:background-color,border-colorandborder-radiusin dark (rgba(255,255,255,0.02)/rgba(255,255,255,0.1)) and light (rgba(255,255,255,0.9)/rgba(15,23,42,0.16)).No screenshot is attached — the browser pane was not compositing in this environment, so verification was done through computed styles and element geometry rather than pixels.
Note for the reviewer, unrelated to this change
npm startfails in a fresh checkout withTypeError: pathRegexp is not a functionfromexpress@4.22.2insidewebpack-dev-server. It predates this branch and does not affectnpm run build, but the dev server is currently unusable and probably wants a dependency refresh.🤖 Generated with Claude Code