Skip to content

Add a shared max-width variable for body text - #17427

Open
stephaniehobson wants to merge 1 commit into
prose-introfrom
text-body-max-cols
Open

Add a shared max-width variable for body text#17427
stephaniehobson wants to merge 1 commit into
prose-introfrom
text-body-max-cols

Conversation

@stephaniehobson

@stephaniehobson stephaniehobson commented Oct 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

One-line summary

Body-sized text has an unreadable line length at 100% of the site, so many components cap it. Turns out we've been capping it inconsistently, so... variable!

Significant changes and points to review

  • I picked 8 columns as the standardized width (about 912px) so showcase and intro body text will narrow.

Issue / Bugzilla link

n/a

Testing

This change affects a number of static uses of the components. intro and showcase subheadings are expected to be a bit shorter now but otherwise everything should display right:

@stephaniehobson
stephaniehobson added this pull request to stack #17428 October 6, 2026 17:15
@stephaniehobson
stephaniehobson force-pushed the text-body-max-cols branch 2 times, most recently from 4614be6 to 8235ba9 Compare October 6, 2026 21:20
@stephaniehobson
stephaniehobson force-pushed the text-body-max-cols branch 2 times, most recently from 4af39fd to 0e5ecf6 Compare October 7, 2026 04:21
@stephaniehobson
stephaniehobson force-pushed the text-body-max-cols branch 2 times, most recently from d9f5d52 to 4f71932 Compare October 7, 2026 17:05
@stephaniehobson
stephaniehobson marked this pull request as ready for review October 7, 2026 19:28
@stephaniehobson
stephaniehobson requested a review from a team as a code owner October 7, 2026 19:28
@stephaniehobson stephaniehobson added the Needs Review Awaiting code review label Oct 7, 2026
knowler
knowler approved these changes Oct 8, 2026
View reviewed changes

@knowler knowler left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r+

@stephaniehobson
Add a shared max-width variable for body text
f35cc36 
Adds $text-body-max-cols (8 of 12 grid columns, about 912px at the
1440px content max) in m24 vars/_text.scss, following the
$text-title-* / $text-body-* convention. Components that would otherwise
fill all 12 columns use it to keep lines a readable length:

- longform at lg: page-grid() max-width, and the article image +
  caption's sub-grid() context (unchanged, was 8)
- prose at lg: single-column body span (unchanged, was 8;
  the column rules now use span syntax)
- intro body text and showcase body text at xl: max-width (was 9)

The only compiled change is intro and showcase body text at xl
(min-width 1312px), which narrows from 9 to 8 columns. The mozilla-ads
and mozilla-anonym bundles also change because they include m24/base,
but those pages don't render intros or showcases.

Manual review at xl (1312px and wider), and once below it to confirm no
change:

- Homepage: intros and showcase sections.
- CMS About us page and /about/manifesto/ (showcase and prose).
- A Freeform page with intro-style, showcase and prose blocks.
- An Article page with an intro, text, and an image + caption.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@knowler knowler knowler approved these changes

Assignees

No one assigned

Labels

Needs Review Awaiting code review

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@stephaniehobson @knowler