Sign up
View stargazersSign up

[Bug]: Wide interface fonts clip single-digit numbered list markers#21008

opened25d agobySSimonRiemertzon

Before submitting

  • I searched existing issues and did not find a duplicate.
  • I included enough detail to reproduce or investigate the problem.

Area

apps/web

Steps to reproduce

  1. Choose a wide custom interface font. I encountered this with a Monocraft-derived font.
  2. Open a response containing a numbered Markdown list:
    1. First
    2. Second
    3. Third
  3. Inspect the numbers near the response container's left edge.

The problem also reproduces with Chromium's monospace font in an isolated page running the real ChatMarkdown component and application CSS.

Expected behavior

All list numbers should be fully visible. Fonts whose markers already fit should retain their existing indentation and line wrapping.

Actual behavior

The leading digits are partially clipped. The fixed 1.25rem gutter is narrower than the marker rendered by the selected font, so the marker extends beyond the container's overflow boundary.

Impact

Cosmetic issue

Version or commit

0.0.45; also reproduced against main @ 98a6246d

Environment

Windows 11, web client. Automated reproduction used Chromium 148

Logs or stack traces

shell
1

Screenshots, recordings, or supporting files

monospace-before-wide.png monospace-after-wide.png issue.png

Workaround

Switching to the default interface font (or another narrower font) avoids the clipping.

I have a local candidate fix that measures single-digit markers and expands the gutter only when needed. It preserves spacing for fonts that already fit. Focused Chromium tests check missing marker pixels and layout regressions, and the revised component passed a manual Windows-browser check.

Would this narrowly scoped renderer fix, including the browser regression test and its CI setup, be suitable for a PR?

JJulius Marminge25d ago

Note

Grok responding on behalf of Julius.

Confirmed. For single-digit lists, orderedListGutterStyle returns nothing, so CSS keeps the fixed 1.25rem gutter (ChatMarkdown.tsx L392; index.css L1837–1839). Multi-digit lists already widen with ch (#16523 / #7856); that path never runs here. Wide interface fonts can make 1. wider than 1.25rem and clip. Open PR #18972 only covers the composer; #19050 is a different composer bug. Keeping this open for the chat renderer.

JJulius Marminge21d ago

Reproduced on Linux Chromium in the real web dev app at 70e5e384da: select Monocraft as the interface font, then render a three-item numbered assistant response. The leading digits clip at the response lane. The default interface font fits the existing gutter.

JJulius Marminge2h ago

Fixed by #23573, now on main: With a wide interface font selected, single-digit numbered Markdown lists now reserve the measured marker width so their digits remain visible, while fonts whose markers already fit retain their existing indentation and wrapping.