Skip to content

fix(chat): stop code blocks and tables forcing the message column wide - #16

Merged
sixvolts merged 1 commit into
mainfrom
ci/chat-pre-overflow
Sep 6, 2026
Merged

fix(chat): stop code blocks and tables forcing the message column wide#16
sixvolts merged 1 commit into
mainfrom
ci/chat-pre-overflow

Conversation

@github-actions

@github-actions github-actions Bot commented Sep 6, 2026

Copy link
Copy Markdown

Fourth attempt, and the first one based on measurement rather than reading CSS.
A Playwright probe on icecube rendering a deliberately wide message named the
culprit immediately:

PRE. scrollW=2864 boxW=2864
CODE.hljs scrollW=2834 boxW=2834
DIV.chat-msg-body boxW=2864
P. boxW=2864 <- prose inherited the width
TABLE. boxW=818 <- never the problem

The

 was 2864px and dragged .chat-msg-body and both 

siblings with it,
which is why PROSE ran off the panel edge. The table was innocent throughout;
the three earlier fixes (flex min-width, grid minmax, table styling) all
targeted things that were not the cause, which is why none of them helped.

max-width:100% on the pre could never work: it resolves against
.chat-msg-body, which has no definite width of its own — it is a block in a
flex column being stretched BY this very child. Circular.

The fix breaks that cycle: width:0 keeps the element's intrinsic size out of
the parent's max-content calculation, min-width:100% expands it back to the
parent's resolved width, and overflow-x:auto scrolls the long line inside its
own box. Applied to both

 and  — the table needed it too once
measured (bubble client=408 vs content=818). The inner gets no width at
all; width:max-content there re-introduced exactly the 2834px the pre had just
given up.

Verified by re-running the probe after each change: .chat-msg-body and both


went 2864 -> 818 -> 408, matching the bubble exactly, and only CODE still
"overflows" — inside its own scroll container, which is the design.

Ships with the probe as tests/e2e/flows/chat-overflow.spec.ts so this cannot
regress silently again. It renders a wide table, a 300-char unbroken URL and a
400-char code line, then asserts nothing in the panel has scrollWidth >
clientWidth, allowing TABLE/PRE/CODE to scroll within themselves. On failure it
prints every offender with its widths, so the next person gets the measurement
instead of a guess.


Opened automatically after the tiers check passed on 1a7b2d90.

The check is attached to this branch head, so this is mergeable now.

Fourth attempt, and the first one based on measurement rather than reading CSS.
A Playwright probe on icecube rendering a deliberately wide message named the
culprit immediately:

  PRE.            scrollW=2864  boxW=2864
  CODE.hljs       scrollW=2834  boxW=2834
  DIV.chat-msg-body             boxW=2864
  P.                            boxW=2864   <- prose inherited the width
  TABLE.                        boxW=818    <- never the problem

The <pre> was 2864px and dragged .chat-msg-body and both <p> siblings with it,
which is why PROSE ran off the panel edge. The table was innocent throughout;
the three earlier fixes (flex min-width, grid minmax, table styling) all
targeted things that were not the cause, which is why none of them helped.

max-width:100% on the pre could never work: it resolves against
.chat-msg-body, which has no definite width of its own — it is a block in a
flex column being stretched BY this very child. Circular.

The fix breaks that cycle: width:0 keeps the element's intrinsic size out of
the parent's max-content calculation, min-width:100% expands it back to the
parent's resolved width, and overflow-x:auto scrolls the long line inside its
own box. Applied to both <pre> and <table> — the table needed it too once
measured (bubble client=408 vs content=818). The inner <code> gets no width at
all; width:max-content there re-introduced exactly the 2834px the pre had just
given up.

Verified by re-running the probe after each change: .chat-msg-body and both <p>
went 2864 -> 818 -> 408, matching the bubble exactly, and only CODE still
"overflows" — inside its own scroll container, which is the design.

Ships with the probe as tests/e2e/flows/chat-overflow.spec.ts so this cannot
regress silently again. It renders a wide table, a 300-char unbroken URL and a
400-char code line, then asserts nothing in the panel has scrollWidth >
clientWidth, allowing TABLE/PRE/CODE to scroll within themselves. On failure it
prints every offender with its widths, so the next person gets the measurement
instead of a guess.
@sixvolts
sixvolts merged commit bf8a1b2 into main Sep 6, 2026
1 check passed
@sixvolts
sixvolts deleted the ci/chat-pre-overflow branch September 6, 2026 21:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant