fix(web): stop wide ordered list markers from clipping

[UtkarshUsername]

Problem

With some Interface fonts like Courier New or NSimSun, the first digit of every 2+ digit marker in a chat numbered list gets cut off. Single-digit markers render fine.

Steps: set Interface font to Courier New (or NSimSun), then send or read any chat message containing an ordered list of 10 or more items.

Change

orderedListGutterStyle reserved (digits + 1)ch for the marker gutter, which covers the digits and the period but not the trailing space after the marker. ch is the width of the font's 0, and monospace fonts give every glyph that same width, so 10. plus its space needs 4ch and only 3ch was reserved. The marker sits left of the text, so that extra character hangs past the gutter and the chat timeline clips it. Proportional fonts never showed it because their period and space are narrower than a digit.

The gutter now reserves the period and the trailing space.

Web and desktop share the renderer in apps/web/src/components/ChatMarkdown.tsx.

Scope and approval

Very small, focused fix of an obvious rendering bug: one arithmetic constant in a private helper. It changes no contract, no provider, no command, and no reverse state, so no triaged issue or maintainer discussion is required.

Verification

Before:

After:

Manual, in the web client with the Interface font set to Courier New, on an ordered list of 25 items. Before, the leading digit of 10. through 21. was clipped; after, all markers render in full and align.

Model: GPT 6.1 Sol
Harness: Codex in T3 Code

[macroscopeapp]

Approvability

Verdict: Approved at 651a508

Macroscope's review found this PR approvable — This is a small, self-contained markdown presentation fix that adds the missing gutter space for multi-digit ordered-list markers. Its effect is limited to list layout, with single-digit lists and unrelated application behavior unchanged.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 85d84b13-bb3a-41b3-8d69-6cf7badb293c

📥 Commits

Reviewing files that changed from the base of the PR and between b38aa18 and 651a508.

📒 Files selected for processing (1)

• apps/web/src/components/ChatMarkdown.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The ordered-list gutter allowance increases by one character width. The sizing comment now specifies the marker characters included in the calculation.

Changes

Ordered-list gutter sizing

Layer / File(s)	Summary
Ordered-list gutter allowance apps/web/src/components/ChatMarkdown.tsx	The sizing comment clarifies that marker width includes the period and trailing space, plus a minus sign for negative markers. The allowance changes from markerWidth + 1 to markerWidth + 2 character widths.

Priority: ⬇️ Low

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

Change: Bug fix

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 651a5

The gutter adjustment has no identified adverse layout effect in the reviewed context, so no actionable merge risk remains.

Architecture Summary

Architecture risk: 🔵 Low · up to 651a5

The change affects 1 system.

Changed systems: apps/web

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — apps/web (ui) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in apps/web/src/components/ChatMarkdown.tsx: The gutter-sizing comment now specifies that the marker width includes the period and trailing space in addition to a negative marker’s minus sign.
• observed — Modified behavior in apps/web/src/components/ChatMarkdown.tsx: orderedListGutterStyle increases the gutter allowance from markerWidth + 1 to markerWidth + 2 character widths.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly and concisely describes the main change: preventing wide ordered-list markers from clipping.
Description check	✅ Passed	The description covers the problem and reproduction steps, the change, why the fix needs no prior approval, and focused verification with before-and-after screenshots and observed results.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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