fix(web): handle wide ordered-list marker edge cases

[abcdmku]

What changed

• Ordered-list gutter sizing now compares the first and last markers, including a negative marker's minus sign.
• Raw HTML start values are coerced before sizing the gutter.
• Footnote ordered lists keep their computed gutter instead of resetting to 1.25rem.
• Decimal markers use tabular numerals so their digits align.

Why

#6527 landed the core dynamic-gutter fix while #5163 was open, which left the older PR conflicting with main. This replacement keeps the current implementation and carries forward the edge cases and marker alignment that are still missing.

UI changes

The original before/after evidence is preserved in #5163. The replacement is limited to cases not covered by the implementation that has since landed on main.

Before

After

Verification

• pnpm exec vp fmt --check apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/index.css
• pnpm exec vp lint --report-unused-disable-directives apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx
• cd apps/web && pnpm exec vp test run --passWithNoTests --project unit src/components/ChatMarkdown.test.tsx
• pnpm exec vp run --filter @t3tools/web typecheck

Supersedes #5163.

Note

Fix ordered-list gutter sizing for wide and negative markers in ChatMarkdown

• orderedListGutterStyle now parses start via Number.parseInt on stringified input (defaulting to 1 on NaN) and sizes the gutter from the widest of the first and last markers, including the minus sign for negative starts
• CSS updates in index.css: ordered list markers use font-variant-numeric: tabular-nums, and footnote ordered lists inherit padding from .chat-markdown ol so widened gutters apply instead of the prior fixed 1.25rem
• Behavioral Change: second parameter of orderedListGutterStyle widens from number | undefined to unknown; non-numeric inputs are now parsed rather than ignored. Footnote list padding-left no longer hardcodes 1.25rem.

^{Macroscope summarized 2bd7d91.}

---

Note

Low Risk
UI-only markdown list styling with unit tests; no auth, data, or security impact.

Overview
Fixes remaining ordered-list marker clipping in chat markdown after the dynamic-gutter work.

orderedListGutterStyle now parses HTML start (including string values) and sizes --list-gutter from the widest of the first and last markers, counting a negative start’s minus sign. Footnote lists no longer force padding-left: 1.25rem, so a widened gutter can apply. Decimal markers use tabular-nums so digits align.

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

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ed77eae7-0863-46cc-98f8-3d2a6fd8b06b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved at 2bd7d91

Macroscope's review found this PR approvable — Self-contained UI bug fix for ordered-list marker width edge cases in markdown rendering. Changes include test coverage and are limited to visual rendering logic with no sensitive areas affected.

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