fix(chat): stop code blocks and tables forcing the message column wide - #16
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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