fix(web): prevent numbered list markers from being clipped

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)

[G-R3]

Collapsed user messages could clip the leading digit from two-digit ordered list markers because the default marker gutter was too narrow.

Widen the gutter based on the largest list marker, starting with two-digit lists. Add regression coverage for a collapsed list numbered 10 through 19.

Before	After

Testing

• vp test run apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp lint apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx
• vp fmt apps/web/src/components/ChatMarkdown.tsx apps/web/src/components/ChatMarkdown.test.tsx apps/web/src/components/chat/MessagesTimeline.test.tsx apps/web/src/index.css --check

Built with GPT-5.6 Sol using the Codex harness in T3 Code.

---

Note

Low Risk
Localized chat markdown list styling and tests; no auth, data, or API changes.

Overview
Fixes clipped leading digits on two-digit ordered list markers (e.g. items 10–19), especially in collapsed long user messages where overflow hides markers painted outside the default gutter.

orderedListGutterStyle now applies inline --list-gutter when the widest marker is two or more characters (threshold was three+). Single-digit lists still use the default 1.25rem gutter; wider lists keep scaling by marker width plus one ch.

Regression tests cover the helper and a collapsed timeline message with start="10" and --list-gutter:3ch. CSS comments in index.css were updated to describe multi-digit widening.

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

Note

Fix clipped numbered list markers by widening gutter for multi-character markers

• Changes the threshold in ChatMarkdown.orderedListGutterStyle from markerWidth <= 2 to markerWidth <= 1, so lists with markers wider than one character (e.g. two-digit items or negative starts) get a wider --list-gutter (3ch for two-digit markers).
• Updates tests in ChatMarkdown.test.tsx and MessagesTimeline.test.tsx to expect widened gutters for multi-character markers.
• Behavioral Change: lists starting at 10+ or with negative two-digit starts now render with --list-gutter: 3ch instead of the default, which may shift list indentation in existing content.

^{Macroscope summarized 7dd06e1.}

[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: 602a311e-1152-4b32-84ef-aa0dcda6fed4

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 7dd06e1

Macroscope's review found this PR approvable — This is a small, self-contained web rendering fix that widens ordered-list gutters only for multi-character markers, with focused regression coverage. Other changes are comments, tests, or PR asset images, and there are no broader API, data, security, or deployment effects.

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

Dismissing prior approval to re-evaluate 7dd06e1

[shivamhwp]

gpt-5.6-sol on behalf of shivamhwp.

Thank you for working on clipped numbered-list markers. We are closing this PR because #6527 and #7856 have already landed the complete fix on main. ChatMarkdown now reserves width for longer ordered-list markers and handles the wider edge cases this branch was trying to address.

The current implementation covers the bug, so this older patch is no longer needed.

[G-R3]

Hey @shivamhwp, I retested this against the latest main. The bug remains for markers from 10 through 99.

#6527 fixes 100+ markers, while #7856 handles other wide-marker edge cases. Both retain the two-character threshold. This PR completes the general fix by applying the existing dynamic gutter sizing to two-character markers.

On main, the marker is 22.35px wide but has only 20px of gutter inside an overflow-hidden message, causing the clipping. This PR increases the gutter to 26.45px.

The attached video shows the difference.

t3code-list-marker-bug.mp4

disclaimer: I asked GPT 5.6 sol to record this video [using t3code ofc :)]

[shivamhwp]

GPT-5.6 Sol on behalf of @shivamhwp.

Thanks for following up. We retested this and confirmed you were right. The clipping still exists for markers 10 through 99 on current main, and your change fixes it.

Sorry, we closed this based on the incorrect assumption that #6527 and #7856 already covered this case.

I tried to reopen #7339, but GitHub will not allow it because the list-marker-gutter branch was replaced with a newer version while the PR was closed. This is a GitHub limitation, not a problem with your code.

Could you open a new PR from the current list-marker-gutter branch?

We tested the current branch against current main. It merges cleanly, and the focused tests, lint, typecheck, build, and browser check all passed.

[G-R3]

@shivamhwp TY for taking a look and confirming! I opened a replacement PR at #9101 :)