One page measure for the marketing chrome, and a three-step templates section on home - #27
Merged
Merged
Conversation
The marketing header and footer resolved their container width from `--width-aa-shell-marketing` (66.5rem) while /templates and the legal pages laid their own content out on `--width-aa-shell` (72rem). Measured at 1280: the header band ran 108→1172 and the templates card grid 88→1192, so the wordmark started 44px to the RIGHT of the page heading beneath it and the header's right edge stopped 44px short of the grid's. Two containers that had to agree, declared independently, with nothing to notice when they stopped agreeing. Fixed at the container rather than per page — /templates is owned by another lane and legal.tsx would only have moved the same defect one file over. The second measure is deleted; `.aa-shell` is the page width for every surface, and `.aa-marketing-shell` is now purely the hook the ≤560px header rule and the footer band select on. Home widens by 88px as a result. Its hero card (`--width-aa-panel`), feature lines and origin note (`--width-aa-measure`) are capped independently and do not move; only the two-column examples and pricing grids take the extra width. Measured after, header inner vs main content, content box: 390 16→374 / 16→374 768 24→744 / 24→744 1280 88→1192 / 88→1192 1920 408→1512 / 408→1512 No horizontal overflow at any of the four. The regression test compares resolved pixels, not token names: same width expression and same inline padding for the header band, the footer band, home, templates and legal, at every breakpoint the sheet distinguishes. Asserting "both say --width-aa-shell" would pass just as happily on a same-valued alias, and the claim a reader has is about edges. Co-Authored-By: CRHQ <noreply@crhq.ai>
The home page said what people make with this and never said how they get a page that looks like the ones in the gallery. This is the answer, in three moves: the agent picks a template, it rewrites it in your words and colours, and you keep the result as a template of your own. It ends at /templates, which nothing on the home page linked to before. STYLE GUIDE FIRST. `MarketingSteps` is defined and specimened in /style-guide before the home page renders it, and the guide imports the page's own constant rather than paraphrasing it — a specimen that paraphrases production drifts from it. Two specimens, because the state this component actually has is copy length: the shipped three, and three of markedly uneven length, which is the case that shows the row keeps its numerals on one rail instead of floating each step against its own copy. Everything else is reused: `MarketingSection` for the kicker and heading, `MarketingFinalCta` for the closing action, `Button` inside it. WHAT THE ROW IS NOT. Not a fourth boxed treatment — the page already raises the example cards, borders the plan cards and tints the origin note. The steps sit open under one hairline each, which reads as a single rail across a row and as dividers when stacked, in `--color-aa-line` like every other divider here. No emoji, no accent stripe down one side, and the numerals are muted rather than accent because `.aa-page-kicker` already states the rule: the accent marks an action, a state or a link, and `.aa-marketing-example__number` is spending it on an index directly above. Three columns, stacking to one at the sheet's existing 720px point rather than a bespoke breakpoint — with three items, every `auto-fit` minimum this page could take leaves some range rendering two across and one below, and 768 was inside it. Verified at 390 / 768 / 1280 / 1920: no horizontal overflow at any width (scrollWidth == innerWidth), three columns from 768 up, one column at 390, and the only control in the section is a 180x44 button. Left off the coming-soon page on purpose, and the test says why: /templates would answer perfectly well pre-launch, but that page's design is one thing to do. Co-Authored-By: CRHQ <noreply@crhq.ai>
scheemunai
force-pushed
the
fix/marketing-shell-alignment
branch
from
September 5, 2026 14:20
d78b022 to
d161443
Compare
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
2 participants
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 public-facing fixes, both founder-reported. Independent commits; the first can be cherry-picked alone if the second needs more discussion.
1 · One page measure, so the header starts where the page does
.aa-marketing-shellcarried a container width of its own —--width-aa-shell-marketing, 66.5rem — while/templatesand the legal pages laid their own content out on--width-aa-shell, 72rem. Two containers that had to agree, declared independently, with nothing to notice when they stopped.Fixed at the shared container: the second measure is deleted,
.aa-shellis the page width everywhere, and.aa-marketing-shellis now purely the hook the ≤560px header rule and the footer band select on./templateswas not touched — another lane owns that file, and fixing it there would only have moved the same defect intolegal.tsx.Measured in Chromium, content box,
left → right (width):scrollWidth == innerWidthat all four widths, on/,/templatesand/terms.On the max measure. 72rem (1152px box / 1104px content) is kept as the single page width. It is what five of seven surfaces already use, including the gallery the nineteen designed cards were laid out against and the dashboard; narrowing it would have moved more than it fixed. At 1920 that is 1104px of content inside 408px gutters. The report's alternative reading — "the grid runs ~1487px at 1920" — did not reproduce: production measures 1104px there, and the widest thing on the page is the 1152px shell box.
Regression test compares resolved pixels, not token names — same width expression and same inline padding for the header band, footer band, home, templates and legal, at every breakpoint the sheet distinguishes. Verified to fail on the pre-fix stylesheet (
expected 1152 to be 1064at 1280/1440/1920).2 · "Start with a template. Make it yours." on the home page
Nothing on the home page linked to
/templates. This section answers the question the examples above it raise — the reader has just seen four pages that look better than the blank document they were imagining — in three steps, ending at the gallery.Style guide first.
MarketingStepsis defined and specimened in/style-guidebefore the home page renders it, and the guide importsHOME_TEMPLATE_STEPSrather than paraphrasing it. Two specimens: the shipped three, and three of markedly uneven copy length — the state this component actually has, and the case that shows the row keeps its numerals on one rail.MarketingSection,MarketingFinalCtaandButtonare reused as-is.Aesthetics. Not a fourth boxed treatment: the page already raises the example cards, borders the plan cards and tints the origin note. The steps sit open under one hairline each — a rail across a row, dividers when stacked — in
--color-aa-line, the same hairline as every other divider. No emoji. No accent stripe down one side. The numerals are muted rather than accent, because.aa-page-kickeralready states the rule and.aa-marketing-example__numberis spending the accent on an index directly above.Responsive, verified at 390 / 768 / 1280 / 1920: three columns from 768 up (
352 352 352at 1280+,224 224 224at 768), one column at 390, no horizontal overflow at any width, and the section's only control is a 180×44 button. Stacks at the sheet's existing 720px point rather than a bespoke breakpoint — with three items, everyauto-fitminimum this page could take leaves some range rendering two across and one below, and 768 was inside it.Deliberately not on the coming-soon page; the test carries the reason.
pnpm checkclean (20 pre-existing warnings, 0 errors).pnpm exec vitest run: 150 passed, 1 skipped. Not deployed.🤖 Generated with Claude Code