fix(ui): variable width toc

[avivkeller]

Fixes #9019

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nodejs-org	Ready	Preview	Aug 1, 2026 8:19pm

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[cursor]

PR Summary

Low Risk
Responsive CSS-only layout tweaks with no changes to data, auth, or application logic.

Overview
On 3xl viewports, article pages use a wider 120rem (max-w-12xl) shell so nav, footer, and article content stay aligned.

The article grid gives the extra width to the metabar column (--spacing(144) instead of --spacing(80) on the right), so table-of-contents labels have room and stop wrapping. NavBar and Footer inner containers get the same 3xl:max-w-12xl cap.

^{Reviewed by Cursor Bugbot for commit 2430689. Bugbot is set up for automated code reviews on this repo. Configure here.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.10%. Comparing base (efbdb7b) to head (2430689).
⚠️ Report is 3 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9062      +/-   ##
==========================================
+ Coverage   75.06%   75.10%   +0.03%     
==========================================
  Files         102      102              
  Lines        9105     9106       +1     
  Branches      373      372       -1     
==========================================
+ Hits         6835     6839       +4     
+ Misses       2266     2263       -3     
  Partials        4        4              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

[github-actions]

📦 Build Size Comparison

Summary

Metric	Value
Old Total First Load JS	7.16 MB
New Total First Load JS	7.16 MB
Delta	32.00 B (0.00%)

Changes

🔄 Modified Routes (4)

Route	Old First Load JS	New First Load JS	Delta
/[locale]	1.68 MB	1.68 MB	📈 8.00 B (0.00%)
/[locale]/[...path]	1.68 MB	1.68 MB	📈 8.00 B (0.00%)
/[locale]/blog/[...path]	1.68 MB	1.68 MB	📈 8.00 B (0.00%)
/[locale]/download/archive/[version]	1.68 MB	1.68 MB	📈 8.00 B (0.00%)

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 7f71ccd. Configure here.}

[MikeMcC399]

@avivkeller

You've requested my review.

Do you have a rendered page that I can look at. The preview links didn't seem to be showing any pages with the new design, which is where the issue needed to be fixed.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Suppressed comments (3)

packages/ui-components/src/Containers/Footer/index.module.css:18

• Similar to the NavBar change, widening the Footer .innerContainer to 3xl:max-w-12xl may make the footer wider than some page content containers that still cap at max-w-10xl (e.g. blog contentLayout). If the intent is consistent page framing, consider updating the other layouts to match or keeping the footer width aligned with the most common content container.

  .innerContainer {
    @apply max-w-10xl
      3xl:max-w-12xl
      mx-auto
      flex

.changeset/tasty-toes-smile.md:6

• This changeset describes only the article/metabar change, but the PR also widens the NavBar and Footer containers on 3xl screens. Consider updating the release note to reflect all user-visible layout changes so consumers aren’t surprised by the wider header/footer.

Widen the article layout to 120rem on 3xl screens and give the extra space to the
metabar, so table of contents entries no longer wrap.

packages/ui-components/src/Containers/NavBar/index.module.css:16

• Adding 3xl:max-w-12xl here widens the NavBar container on very wide screens, but some page bodies (e.g. apps/site/layouts/layouts.module.css .contentLayout still uses max-w-10xl) will remain narrower. That can create a visible header/body width mismatch on 3xl viewports; consider aligning all top-level layouts to the same max width, or keeping the NavBar at max-w-10xl unless the wider body layout is universal.

  .innerContainer {
    @apply max-w-10xl
      3xl:max-w-12xl
      xl:mx-auto
      xl:flex