Give the copy the column width its layout asks for - #390
Merged
Merged
Conversation
The copy box was border-box in the preview, the export and the plugin engine, so a layout's side padding came out of its max width. The left layout's 620px left 364px for the copy at 1920 wide, and 39 headings across 16 templates ran past their box; a mask reveal clips at that box, so some were cut off. The box is now content-box, and maxWidth is the width of the copy.
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.
The left and right layouts set
maxWidth: 620with side padding ofclamp(2rem, 8vw, 8rem). The copy box was border-box, from Tailwind's preflight in the preview and the reset in the exported page and the plugin engine, so that padding came out of the 620px. At 1920 wide the copy had 364px. Headings wrapped to a word per line or ran past their box. A mask reveal ends atclip-path: inset(0), which clips at the box edge, so in those sections the overflow was cut off. Meridian's opening "MACHINED" lost its D.The box is now content-box in all three renderers.
maxWidthis the width of the copy, and the padding sits outside it.This table counts headings wider than their column, across all 21 templates, measured in headless Chrome against a production build:
At these sizes, no section got taller than its frame and nothing scrolls sideways. The example sites are built by the plugin engine, and their left and right sections go from a 364px column to the full 620px at 1920 wide. I recaptured the gallery stills from this build, and 10 of the 21 changed.
One heading still overflows at most desktop sizes. Greenshift's "Decarbonisation" is a single word 1091px wide at 143px, so it fits no column. Fixing it means shrinking the heading to fit its column, which I'll do next.
A new test in displayParity checks that all three renderers use a content-box box, and it fails against main. Also checked: tsc, eslint, 500 vitest tests, and a production build.