Fix 2546: display two lines instead of three in header wraps by javiercoronadonarvaez · Pull Request #2549 · boostorg/website-v2

javiercoronadonarvaez · 2026-07-24T01:39:47Z

Issue: #2546

Summary & Context

Fixes the Learn page heading wrapping to three lines on desktop instead of the two-line layout in the Figma design, while keeping the header aligned with the card row below it.

Figma link: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1849-49687
Link to components/page: localhost:8000/learn/

Changes

Applied the intended condensed font width to the Learn page heading via font-variation-settings: "wdth" 84 in static/css/v3/learn-page.css.
Kept the header column at calc(50% - .5 * var(--space-card)) so it stays aligned with the card row below.

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

The browser renders Mona Sans wider than the Figma mock (which shows a condensed rendering), so the two-line layout relies on the condensed wdth 84 width. This holds across the desktop range (header column ~604px at 1280px up to 684px at 1440px+).
Below the 1280px breakpoint (tablet), the 50% column keeps shrinking and the heading reflows to three lines. Out of scope for this desktop-focused fix.

Screenshots

1280 px Width

1440 px Width

Self-review Checklist

Tag at least one team member from each team to review this PR
Link this PR to the related GitHub Project ticket

Frontend

UI implementation matches Figma design
Tested in light and dark mode
Responsive / mobile verified
Accessibility checked (keyboard navigation, etc.)
Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
Test without JavaScript (if applicable)
No console errors or warnings

Summary by CodeRabbit

Style
- Reformatted and normalized Learn page layout styles for improved consistency.
- Updated spacing and typography values to use standardized variables (including tighter header letter spacing).
- Preserved existing responsive behavior and overall visual styling.

coderabbitai · 2026-07-24T01:39:55Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6728a2c6-7b4e-4c86-a1fc-e7de249f8887

📥 Commits

Reviewing files that changed from the base of the PR and between 268a0f6 and cbbe6ce.

📒 Files selected for processing (1)

static/css/v3/learn-page.css

📝 Walkthrough

Walkthrough

The Learn page CSS is reformatted across header, card grid, masonry, and responsive rules. A calc() term is normalized from .5 to 0.5, and the header heading uses the shared tight letter-spacing variable.

Changes

Learn page CSS

Layer / File(s)	Summary
Layout style normalization `static/css/v3/learn-page.css`	Header, card grid, masonry, and responsive CSS rules are re-indented and reflowed; the `calc()` term is normalized and `learn-page-header h1` adopts `var(--letter-spacing-tight)`.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related issues

boostorg/website-v2#2546 — Updates the Learn page header letter spacing associated with the issue’s text-wrapping behavior.

Suggested reviewers: jlchilders11

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main UI change: reducing the Learn page heading wrap from three lines to two on desktop.
Description check	✅ Passed	The description matches the template well, including issue number, summary, changes, risks, screenshots, and checklist items.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch javiercoronarv/2546-learn-header-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@static/css/v3/learn-page.css`:
- Around line 33-35: Remove the empty line between the font-size and font-weight
declarations in the affected CSS rule so it satisfies the
declaration-empty-line-before Stylelint rule.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 00fe67cf-7093-4dba-aa78-b468f899a43e

📥 Commits

Reviewing files that changed from the base of the PR and between 28c0d13 and 268a0f6.

📒 Files selected for processing (1)

static/css/v3/learn-page.css

coderabbitai · 2026-07-24T01:49:34Z

+  font-size: var(--font-size-large);

-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-loose-alt);
-    /* 31.92px */
-    letter-spacing: -0.24px;
+  font-weight: var(--font-weight-regular);


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Remove the empty line before font-weight.

Stylelint reports declaration-empty-line-before at Line 35. Remove the blank line between font-size and font-weight to keep the stylesheet lint-clean.

Proposed fix

font-size: var(--font-size-large); - font-weight: var(--font-weight-regular);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

font-size: var(--font-size-large);

font-weight: var(--font-weight-regular);

line-height: var(--line-height-loose-alt);

/* 31.92px */

letter-spacing: -0.24px;

font-weight: var(--font-weight-regular);

font-size: var(--font-size-large);

font-weight: var(--font-weight-regular);

🧰 Tools

🪛 Stylelint (17.14.0)

[error] 35-35: Expected no empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@static/css/v3/learn-page.css` around lines 33 - 35, Remove the empty line between the font-size and font-weight declarations in the affected CSS rule so it satisfies the declaration-empty-line-before Stylelint rule.

Source: Linters/SAST tools

julhoang

Thank you for the code formatting up on this file too btw! ✨

julhoang · 2026-07-24T19:34:39Z

+  letter-spacing: -0.64px;
+  margin: 0;
+  align-self: stretch;
+  font-variation-settings: "wdth" 84;


I think this width value should be 95, but that's already the default width that we have implemented in static/css/v3/fonts.css as font-stretch: 95% so we don't need to reset it here.

What I suspect might be causing the issue here is just a few pixels difference in the learn-page-header div or learn-page-container div that pushes "anything" to the next line. Would you mind helping us check that? 🙏

@julhoang I tested at the exact Figma column width of 696 px and even configuring wdth 95 explicitely, Chrome still wraps the text as a three liner. It appears Blink renders Mona Sans wider than Figma at wdth 95. In that sense, it's a font rendering gap, rather than one introduced by setting the container width.

What do you think? Should I experiment and tune the value, or explore an alternative so as not to override the width axis?

fix: display two lines instead of three in header wraps

268a0f6

javiercoronadonarvaez marked this pull request as ready for review July 24, 2026 01:47

coderabbitai Bot reviewed Jul 24, 2026

View reviewed changes

javiercoronadonarvaez linked an issue Jul 24, 2026 that may be closed by this pull request

Learn Page Header Wraps to Three Lines Instead of Two on Desktop #2546

Open

javiercoronadonarvaez changed the title ~~Task 2546: display two lines instead of three in header wraps~~ Fix 2546: display two lines instead of three in header wraps Jul 24, 2026

julhoang requested changes Jul 24, 2026

View reviewed changes

fix: set letter-spacing with design tokens instead of hardcoded value

cbbe6ce

Navigation Menu

Uh oh!

Fix 2546: display two lines instead of three in header wraps - #2549

Fix 2546: display two lines instead of three in header wraps#2549
javiercoronadonarvaez wants to merge 2 commits into
developfrom
javiercoronarv/2546-learn-header-fix

javiercoronadonarvaez commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 24, 2026

Uh oh!

julhoang left a comment

Uh oh!

julhoang Jul 24, 2026

Uh oh!

javiercoronadonarvaez Jul 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

javiercoronadonarvaez commented Jul 24, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: #2546

Summary & Context

Changes

‼️ Risks & Considerations ‼️

Screenshots

1280 px Width

1440 px Width

Self-review Checklist

Frontend

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

julhoang left a comment

Choose a reason for hiding this comment

Uh oh!

julhoang Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

javiercoronadonarvaez Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

javiercoronadonarvaez commented Jul 24, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading