fix(report): remove type/spacing steps at widths the layout does not change - #35
Merged
Merged
Conversation
…change report changed its typographic system at two widths where nothing about the layout moved. At 481px it stepped both type scale and spacing; at 769px it stepped spacing alone. Both handed the reader a measure cut for a layout they did not have, and 481px cost 414px of height for it. Font sizes are now fluid across 480-768, so there is no step to misplace: body 15->17px, .lede__lead/.pull 16->19px, .sec h2/.next h2 22->24px. The three spacing values that stepped at 769 (body padding, .paper padding, .byline gap) ramp across 704-1024 the same way. Leading and border-radius have no fluid form -- a unitless line-height cannot clamp, and an em one changes what descendants inherit -- so they move to the 44rem block, which already declares layout. Moving the step down widens the band it governs, so body leading lands on 1.5 exactly rather than the 1.48/1.42 it used to take below 481px; prose must not sit under the WCAG 1.4.12 floor in the wider band. The title keeps 1.14 as display type. Four media blocks become two, both declaring layout. Measured over 1601 widths, innerWidth asserted at each: 480->481 +414px, no column change (defect) -> 0px 768->769 +80px, no column change (defect) -> +1px 704->705 and 1023->1024 are unchanged in kind: both change column count. Heights 390/768/1440: 2823/2662/2660 -> 2784/2662/2660. No horizontal overflow 320-1920. Type floors hold at every width. Rendered text is byte-identical -- no content removed. Co-Authored-By: CRHQ <noreply@crhq.ai>
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.
reportchanged its typographic system at two widths where nothing about the layout moved..ledestacks,.quarterbecomes a row)What changed
Route 1 (fluid) for everything with a unit. Font sizes ramp across 480–768 so there is no step to misplace —
body15→17px,.lede__lead/.pull16→19px,.sec h2/.next h222→24px. The three spacing values that stepped at 769 (bodypadding,.paperpadding,.bylinegap) ramp across 704–1024 the same way.Route 2 (move to a layout boundary) for what cannot ramp. A unitless
line-heighthas no fluid form, and anemone changes what descendants inherit — so leading andborder-radiusmove into the44remblock, which already declares layout.Moving that step down widens the band it governs, from 320–480 to 320–704. So body leading lands on 1.5 exactly rather than the 1.48/1.42 it previously took below 481px — prose must not sit under the WCAG 1.4.12 floor across the wider band. This is a small improvement on the status quo at 320–480.
.titlekeeps 1.14 as display type.Four media blocks become two, both declaring layout.
Verification
Measured over 1601 widths (320–1920, 1px),
innerWidthasserted before every recorded value:480→481: +414px → 0px768→769: +80px → +1px2823/2662/2660→2784/2662/2660— one better, two unchanged.pnpm check: 20 warnings, all pre-existing, zero inreport.html.pnpm exec vitest run: 1096 passed, 0 failed.Note on the instrument
My first harness reported
layout-changes=yesat every boundary, including 768→769 where no rule fires — it was comparinggrid-template-columnsused pixel widths, which differ at every viewport, instead of track count. That produced false exclusions, the dangerous direction. Fixed, and confirmed against the known baseline: it now independently reproducesreport480→481 at +414 with identical column count → defect.Co-Authored-By: CRHQ noreply@crhq.ai