Board: keep the leaderboard title on one line at every width

[arilivigni]

The public board's title, "GitHub Learn at Universe leaderboard", wrapped onto two lines. It could grow to 4.5rem (72 px), but the column it sits in is at most 64rem wide, and at that size the title is wider than the column.

Fix (leaderboard-service/public/board.css)

• The header is a size container, and the h1 font size is min(5.2cqi, 4.5rem) with white-space: nowrap.
• Measured in Chromium at weight 800, the title is up to 18.3 em wide in Mona Sans (it gets relatively wider at small sizes) and 18.4 em in the macOS fallback font. A size of 5.2cqi fits a 19.2 em title, about 4% headroom over the widest measurement.
• Browsers without container units get min(4.6vw, 3rem) instead, which fits the column's content box at every viewport width.
• Result: 48 px on desktop and large displays (was 72 px, wrapped); about 15 px on a 320 px phone.

Verification

• Real Chromium against the live page with this CSS swapped in, at 12 widths from 280 to 3840 px, in Mona Sans and with the web font blocked: 24 of 24 cases on one line, inside the header, with no horizontal scroll.
• The same run without container units (the vw fallback): 24 of 24.
• A new unit test checks the sizing against the 19.2 em width at every viewport width from 280 to 4000 px. It caught all 6 mutations I tried:
  • wrapping allowed;
  • cqi too big;
  • vw too big;
  • rem cap too big;
  • no container;
  • fallback order swapped.
• npm test (311 tests) and npm run check pass.

The live site changes only after a code deploy.

[Copilot]

Copilot review overview

🟡 Changes recommended

The fallback still overflows below approximately 274 CSS pixels.

Review effort: Balanced
Findings: 1

Open (1)

• Fallback title overflows below 274px due to fixed padding · New

What changed in this PR

Updates leaderboard title sizing to prevent wrapping across viewport widths.

Changes:

• Adds responsive container-unit sizing with a viewport fallback.
• Adds regression coverage for title fitting.

File	Description
leaderboard-service/​public/​board.css	Keeps the title on one line responsively.
tests/​leaderboard-service.test.mjs	Tests sizing constraints and fallback order.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Copilot review overview

🟡 Changes recommended

The new test throws because its regex does not match the updated three-argument CSS min() expression.

Review effort: Balanced
Findings: 1

Open (1)

• Update regex to parse three-argument min() fallback · New

Resolved since last review (1)

• Fallback title overflows below 274px due to fixed padding

[Copilot]

Copilot review overview

🟡 Changes recommended

The fallback calculation can overflow when classic vertical scrollbars reduce the width available to the header.

Review effort: Balanced
Findings: 1

Open (1)

• Account for scrollbar gutter when calculating content width · New

Resolved since last review (1)

• Update regex to parse three-argument min() fallback

Previously missed (1)

In code that hasn't changed since last review

Prevent fallback overflow when classic scrollbars reduce content width

leaderboard-service/​public/​board.css:54

In browsers that need this fallback, vw includes a classic vertical scrollbar, while main's auto width excludes it. The board is tall enough to scroll, so at a 280px viewport with a 15px scrollbar the header is about 233px wide, but this fallback sizes the measured Mona title to about 236px; nowrap can therefore reintroduce overflow/horizontal scrolling on Windows or Linux. Please make the fallback account for the scrollbar gutter (and cover that case in the test).

[Copilot]

Copilot review overview

🟢 Approval recommended

The responsive sizing logic and fallback are consistent, and the regression test covers the relevant width and scrollbar cases.

Review effort: Balanced
Findings: None

Resolved since last review (1)

• Account for scrollbar gutter when calculating content width