fix(web): single-digit numbered lists no longer clip in wide fonts#23573

Problem

With a wide interface font (Monocraft, or any monospace font), the leading digit of single-digit numbered lists in assistant messages is cut off. Single-digit lists kept a fixed 1.25rem (20px) marker gutter. Monocraft's outside 1. marker is 27px at 14px, so it painted past the chat lane's overflow-x: clip edge. Reproduced on main 8d3b061121 in the web dev app: Settings → Appearance → Interface font = Monocraft, then an assistant response with 1. First / 2. Second / 3. Third.

Change

The shared :is(.chat-markdown, .composer-tiptap) ol rule now sets --list-gutter: max(1.25rem, 3ch). The composer has used this rule since https://git.cafe/pingdotgg/t3code/pulls/18972, and it matches the ${digits + 2}ch width ChatMarkdown already applies to multi-digit lists. The composer's own copy of the rule is now redundant and is removed. CSS cannot measure the marker, so proportional fonts also get 3ch: single-digit lists there indent a few px more (20px → 23.4px in Liberation Sans at 14px).

Scope and approval

Fixes #21008 GitCafe: https://git.cafe/pingdotgg/t3code/issues/21008 Triaged bug via the automated issue flow; confirmed on the issue by a maintainer comment.

Verification

• Real web dev app (Linux, chrome-headless-shell 154 in T3's Browser panel), seeded copy of real state. Before = 8d3b061121, after = 439fbdfda0.
• Measured padding-inline-start of single-digit lists: Monocraft 20px → 28.5px, so the marker now starts inside the lane's clip edge. Liberation Sans 20px → 23.36px. Unchanged: multi-digit lists (38px), nested ul (20px), composer lists (28.5px / 38px).
• Ordered task list and multi-digit list crops are pixel-identical before and after (AE 0). Composer typing recordings match apart from the caret.
• Two independent code reviews (Claude Opus 5.5 and Claude Sonnet 5.5): MERGE.
• vp fmt --check apps/web/src/index.css passes. No tests cover the gutter; this is CSS-only and proven by the captures below.
• Not checked: plan card and .md file preview (same rule, indent only, never clipped there), user-message bubble at 390px, Safari and Firefox. Mobile renders markdown natively and is unaffected. Desktop uses the same web CSS.

Evidence

Rendering environment: chrome-headless-shell 154 (T3 Browser panel), DPR 2 (1440×900 captures are downscaled by the panel to 1280×800, i.e. 0.889 px per CSS px; 390×844 captures are full DPR 2 at 780×1688), chat text 14px, Interface font Monocraft (FontFace from /__i21008-monocraft.ttf) unless noted, F2 uses Liberation Sans (Arial metrics) as a stand-in for a proportional default because system-ui/sans-serif resolve to Liberation Mono on this VM. Web dev server from the fix worktree; before = base CSS from 8d3b061121 hot-swapped via Vite HMR, after = 439fbdfda0. Same scroll offset (scrollIntoView({block:'start'}) on the fixture message), viewport, theme, and font within each pair; the "Update Available" toast was dismissed for all captures. Seed: seed.py.

Measured gutter (padding-inline-start of the single-digit ol): Monocraft 20px → 28.5px; Liberation Sans 20px → 23.36px; 8.–10. list 38px both (inline 4ch wins); composer single-digit 28.5px both, composer 10. 38px both.

F1 — assistant message, single-digit 1.–3., Monocraft, 1440×900 dark (full surface)

AE fuzz 0: 3662 px; fuzz 10%: 3167 px. All in the fixture lists, the user bubble (F9), plus two sidebar relative-time ticks (19 px each).

F1 crop — 1.–3. list, 1440 dark

AE fuzz 0: 966; fuzz 10%: 939. Before: digits clipped to .; after: 1. 2. 3. fully visible.

F1 — 390×844 dark (full surface)

AE fuzz 0: 14034; fuzz 10%: 13827 (all in list rows).

F1 crop — 1.–3. list, 390 dark

AE fuzz 0: 4254; fuzz 10%: 4180. Before: leading digit clipped; after: visible.

F2 — same message, Liberation Sans (proportional stand-in), 1440×900 light (full surface)

AE fuzz 0: 3373; fuzz 10%: 2339. Only list rows differ.

F2 crop — 1.–3. list, Liberation Sans, 1440 light

AE fuzz 0: 1089; fuzz 10%: 769. No clipping either side; list text moves right 3.36 CSS px (gutter 20 → 23.36px).

F3 crop (control) — 8.–10., Monocraft, 1440 dark

AE fuzz 0: 0; fuzz 10%: 0. Identical.

F4 crop — nested ol > ol (a./b.) + nested ul, Monocraft, 1440 dark

AE fuzz 0: 2272; fuzz 10%: 2192. Before: outer 1./2. clipped; after visible. Inner a./b. list and bullet child move right with the outer gutter (+8.5px); inner gutter is also 28.5px; bullet ul gutter unchanged (20px).

F5 crop — ordered task list, Monocraft, 1440 dark

AE fuzz 0: 0; fuzz 10%: 0. Checkbox negative margin tracks the gutter, so checkbox and text stay put.

F9 (partial, 1440 not 390) — user message bubble 1. one, Monocraft, 1440 dark

AE fuzz 0: 361; fuzz 10%: 0. Marker visible both sides; the right-aligned bubble grows ≈8.5 CSS px to the left.

F6/F7 — composer still after typing, Monocraft, 1440 dark (full surface)

AE fuzz 0: 3671; fuzz 10%: 3034 — all in the timeline lists above the composer, the user bubble, sidebar relative times, and the caret.

F6/F7 crop — composer body

AE fuzz 0: 13; fuzz 10%: 13 — the text caret only (blink phase). Composer lists identical.

F6/F7 — composer recording (Monocraft, 1440 dark; not sent)

Keystrokes, same in both runs (not sent; newlines use Shift+Enter because Enter submits): 1. one, Shift+Enter, two, Shift+Enter ×2, 10. ten. Times are the first video frame (sampled at 20 fps) that shows each composer state:

In both recordings the markers sit at the same position; the composer lists are unchanged.

Before (8d3b061121): f6f7-composer-1440-dark-before.mp4 After (439fbdfda0): f6f7-composer-1440-dark-after.mp4

What else changed (every visible difference, before → after)

• Single-digit ordered lists in .chat-markdown (assistant messages): text and markers move right by the gutter delta (Monocraft +8.5px, Liberation Sans +3.36px); markers no longer clipped by the chat lane. Intended.
• Nested content under a single-digit outer ol (inner a./b. list, nested bullet ul) moves right with the outer gutter. Intended consequence; inner/ul gutters themselves unchanged except inner ol now also 3ch.
• User message bubble containing a single-digit list grows ≈8.5px wider (right-aligned, grows leftward). Intended consequence (shared .chat-markdown rule), no clipping either side.
• Ordered task list: no change (AE 0).
• Multi-digit 8.–10. list: no change (AE 0).
• Composer lists: no change (28.5px / 38px both sides; only caret blink differs).
• Not caused by the diff: sidebar relative timestamps ticking between captures; composer caret blink phase.

🤖 Generated with Claude Code — Claude Opus 5.5 (lead, implement, review, proof audit, evidence) and Claude Sonnet 5.5 (review), driven from T3 Code.

Independent proof audit (evidence lead, head 439fbdfda0)

Verdict: SUFFICIENT for the fix. One claim in the body is wrong. All 12 existing capture pairs check out: the before and after SHAs are correct (8d3b061121 is the merge-base, 439fbdfda0 is the head), and the fuzz-0 and fuzz-10% AE counts recomputed from the uploaded PNGs match exactly. The "What else changed" list accounts for every visible difference. However, "plan card … never clipped there" is wrong for the collapsed plan card. Its max-h-104 overflow-hidden wrapper (ProposedPlanCard.tsx:195) has no side padding, so with the old gutter it clipped the digits exactly like the chat lane did. The new row R2b below shows this and shows the fix removes it.

• Surface matrix (pass 1): audit-23573-matrix.md
• Pass 2 (SHAs, recomputed AE, "What else changed", composer cascade): audit-23573-pass2.md
• Reproducibility: rebuilding F9 independently gives the same gutter (20 → 28.5px) and bubble growth (72.5 → 81 CSS px). The before/after crop delta is fuzz-0 392 / fuzz-10% 0, against the PR's 361 / 0. Comparing my crop with the PR's crop gives fuzz-10% 111 px on both sides, which is renderer/alignment noise with no layout change.
• Minor: the F6/F7 crop table reuses the full-surface filenames (different URLs, 560×110 vs 1280×800). The nested-list bullet understates the inner a./b. shift: it is about +17px (outer +8.5 plus its own 20 → 28.5px), which the F4 caption gets right.

New rows

Rendering environment (new rows): T3 Browser panel, chrome-headless-shell (Google Chrome for Testing 154.0.8037.92), DPR 2, dark theme, chat text 14px, Interface font Monocraft (FontFace injected; set in Settings → Appearance) or Liberation Sans (system font, --font-sans override). The panel's screenshot downsamples 1440x900@2x to 1280x800, so 1440 PNGs are 1280x800 and 390 PNGs are 780x1688 (full 2x). Before = apps/web/src/index.css from 8d3b061121, swapped in by HMR on the same server.

P0 / F9 rebuild: user bubble 1. one, Monocraft, 1440x900 dark

Whole surface:

Crop:

AE whole: fuzz0 857, fuzz10% 358. AE crop (160x70, gray): fuzz0 392, fuzz10% 0. PR's own F9 pair: fuzz0 361, fuzz10% 0. My crop vs PR's crop (sizes match, best offset +880+51): before fuzz0 1572 / fuzz10% 111; after fuzz0 1598 / fuzz10% 111. padding-inline-start: 20px → 28.5px. Bubble width 72.5 → 81 CSS px. Clipped: no (bubble p-3, no overflow clip).

R1: user bubble 1. one\n2. two, 390x844 dark, Monocraft

Whole surface:

Crop:

AE whole: fuzz0 5572, fuzz10% 2918. AE crop: fuzz0 2593, fuzz10% 0. padding-inline-start: 20px → 28.5px. Clipped: no.

R1: user bubble 1. one\n2. two, 390x844 dark, Liberation Sans

Whole surface:

Crop:

AE whole: fuzz0 3646, fuzz10% 2349. AE crop: fuzz0 976, fuzz10% 0. padding-inline-start: 20px → 23.3584px. Clipped: no.

R2b: collapsed proposed-plan card (29 lines, starts 1.–3.), Monocraft, 1440x900 dark

Whole surface:

Crop:

AE whole: fuzz0 3947, fuzz10% 810. AE list crop: fuzz0 898, fuzz10% 769. padding-inline-start: 20px → 28.5px. The ol's left edge (x=405) sits flush with the max-h-104 overflow-hidden wrapper (x=405). Clipped: yes before (the 1./2./3. digits are cut off and only . one shows), no after.

R3: .md file preview — skipped

The fixture /tmp/ev-23573/proj/list.md was in place, but the Files surface did not open from the right panel within the time budget.