fix(web): long lists no longer clip their numbers

[abcdmku]

What Changed

Ordered lists in chat markdown now widen their left padding to fit the marker digits, and markers use tabular numerals. A small tested helper computes the padding.

Why

The old padding was fixed at two digits wide. Item numbers past 99 spilled out and got clipped, so 187. displayed as 87.. Uneven digit widths also made some numbers sit misaligned. In the odd case that there is a ol in a ul bullet items that start with a long number would render through the marker.

UI Changes

Before:

(Fable really struggled to follow directions for this test, see the PS below for more fable fumbles)

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

PS: Open to see fable struggling to follow directions lol, found that haikus lack of brain really helped test this.

---

Note

Low Risk
Scoped to chat markdown list presentation and CSS; no auth, data, or API changes.

Overview
Fixes ordered list number clipping in chat markdown when markers exceed two digits (e.g. 187. showing as 87.) or when lists use a high start value.

Adds orderedListMarkerExtraDigits to compute how many digits past two the widest marker needs (from start, item count, and negative starts). ChatMarkdown wires a custom ol renderer that sets --chat-markdown-ol-marker-extra on each list.

CSS replaces fixed 1.25rem left padding with calc(1.25rem + var(...) * 1ch) and applies tabular-nums on ::marker so multi-digit labels align cleanly. Footnote ordered lists drop redundant padding so they inherit the same behavior. Unit tests cover the helper.

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

Note

Fix ordered list number clipping in chat markdown for long lists

• Adds a new orderedListMarkerExtraDigits utility that computes extra digits beyond two in the widest list marker, accounting for negative start values.
• The ol renderer in ChatMarkdown sets a --chat-markdown-ol-marker-extra CSS variable based on item count and start index.
• index.css uses calc(1.25rem + var(--chat-markdown-ol-marker-extra, 0) * 1ch) for padding-left and adds font-variant-numeric: tabular-nums to list markers for consistent alignment.
• Behavioral Change: footnote ordered lists no longer have a fixed padding-left override and will inherit the dynamic padding.

^{Macroscope summarized 5b60b87.}

[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: c41ec31b-f0f1-49d2-bf6f-c0f592f80056

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.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d631f89a10

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[macroscopeapp]

Approvability

Verdict: Approved 5b60b87

This is a self-contained UI bug fix for list marker clipping, implemented via a well-tested pure utility function and corresponding CSS changes. The unresolved review comment appears to reference code that was actually removed in this PR.

^{You can customize Macroscope's approvability policy. Learn more.}