Description
In rendered markdown messages (mission feed), list markers escape the message block's bounds. Ordered-list numbers (1.–4.) render flush with — or past — the block's left content edge instead of indented inside it, and list item lines wrap wider than the surrounding paragraph text, so parts of bullet/numbered items visually spill outside the block.
Root cause: MessageBody.tsx styles lists with ml-5 (20px margin) and the default list-style-position: outside, so markers are drawn in the margin gutter outside the list's border box. 20px is not enough to contain a decimal marker plus its gap in the 12–13px mono face — a single-digit 1. already lands at the block edge, and:
- two-digit items (
10.+) extend past the block's left edge,
- lists nested inside blockquotes (
pl-3 = 12px) draw markers across/over the blockquote border,
- nested lists inherit the same too-tight gutter.
Expected behavior
List markers stay inside the message block, indented from the block's left content edge (like the disc bullets appear), with ordered and unordered lists sharing a consistent gutter. Standard fix shape: use pl-* padding on ul/ol (e.g. pl-5/pl-6) instead of ml-5, sized to fit decimal markers.
Steps to reproduce
- Start a mission and post (or have a runner post) a message whose markdown contains an ordered list, ideally with 10+ items or a list inside a blockquote.
- View the message in the mission feed.
- Observe the numeric markers sitting at/beyond the block's left text edge, misaligned vs. paragraphs and disc bullets.
Relevant code
src/components/MessageBody.tsx:57-63 — ul → my-1 ml-5 list-disc, ol → my-1 ml-5 list-decimal; markers positioned outside with only the 20px margin as gutter.src/components/EventFeed.tsx:233-235 — feed message rows hosting MessageBody (surface in the screenshot).src/components/MessageBody.tsx:82-86 — blockquote pl-3 interacts with outside markers of nested lists.
Environment
- OS: macOS
- Version: 0.4.12
Description
In rendered markdown messages (mission feed), list markers escape the message block's bounds. Ordered-list numbers (
1.–4.) render flush with — or past — the block's left content edge instead of indented inside it, and list item lines wrap wider than the surrounding paragraph text, so parts of bullet/numbered items visually spill outside the block.Root cause:
MessageBody.tsxstyles lists withml-5(20px margin) and the defaultlist-style-position: outside, so markers are drawn in the margin gutter outside the list's border box. 20px is not enough to contain a decimal marker plus its gap in the 12–13px mono face — a single-digit1.already lands at the block edge, and:10.+) extend past the block's left edge,pl-3= 12px) draw markers across/over the blockquote border,Expected behavior
List markers stay inside the message block, indented from the block's left content edge (like the disc bullets appear), with ordered and unordered lists sharing a consistent gutter. Standard fix shape: use
pl-*padding onul/ol(e.g.pl-5/pl-6) instead ofml-5, sized to fit decimal markers.Steps to reproduce
Relevant code
src/components/MessageBody.tsx:57-63—ul→my-1 ml-5 list-disc,ol→my-1 ml-5 list-decimal; markers positioned outside with only the 20px margin as gutter.src/components/EventFeed.tsx:233-235— feed message rows hostingMessageBody(surface in the screenshot).src/components/MessageBody.tsx:82-86— blockquotepl-3interacts with outside markers of nested lists.Environment