Skip to content

fix(ui): wrap code blocks instead of scrolling them, in every view - #37

Merged
sixvolts merged 1 commit into
mainfrom
ci/wrap-code-blocks
Oct 2, 2026
Merged

sixvolts merged 1 commit into
mainfrom
ci/wrap-code-blocks

Conversation

@github-actions

@github-actions github-actions Bot commented Oct 2, 2026

Copy link
Copy Markdown

A long curl in a chat code block forced horizontal scrolling. Code blocks were
set to scroll inside their own box, a deliberate choice in the chat-overflow
fix (#16) that the operator has now reversed: code wraps.

Measured, not inferred. chat-overflow.spec.ts was tightened first so it
reproduces the bug, then the CSS was fixed against it:

before: CODE.hljs scrollWidth 2834 in a 378px box -> test FAILS
after: no element wider than the 408px bubble -> test PASSES

The offender was the inner , not the

. highlight.js styles .hljs,
and text inside a non-wrapping ignores its parent's white-space, so the
rule has to name the code element too. overflow-wrap:anywhere breaks unbroken
tokens (URLs, base64, long flags) that pre-wrap alone would leave hanging.

Same bug, fixed in every renderer of markdown code:
desktop chat .chat-msg-body pre (two conflicting rules, both scrolled)
mobile chat .mob-msg .bubble pre
desktop notes/wiki .notes-editor .toastui-editor-contents pre
mobile notes .mob-note-body .toastui-editor-contents pre
action run detail .action-run-detail pre (wrapped, but URLs escaped)

One block appended to each stylesheet rather than five edits in place: equal or
higher specificity and placed last, so it wins over the per-view rules and over
any highlight.js theme's lower-specificity .hljs rule. Corrected the earlier
comment that still said code blocks "cannot wrap".

The spec no longer exempts PRE/CODE from the no-horizontal-overflow check (only
TABLE may scroll inside itself), and asserts the 400-char line actually spans
several rendered lines unclipped. That second check exists because an earlier
overflow-x:hidden "passed" a no-scroll check by cutting the text off.

Only desktop chat is measured directly; the other four share the identical rule.
CI's mobile pixel baselines are the broader check on them.


Opened automatically after the tiers check passed on 16c4c995.

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

A long curl in a chat code block forced horizontal scrolling. Code blocks were
set to scroll inside their own box, a deliberate choice in the chat-overflow
fix (#16) that the operator has now reversed: code wraps.

Measured, not inferred. chat-overflow.spec.ts was tightened first so it
reproduces the bug, then the CSS was fixed against it:

  before:  CODE.hljs scrollWidth 2834 in a 378px box   -> test FAILS
  after:   no element wider than the 408px bubble      -> test PASSES

The offender was the inner <code>, not the <pre>. highlight.js styles .hljs,
and text inside a non-wrapping <code> ignores its parent's white-space, so the
rule has to name the code element too. overflow-wrap:anywhere breaks unbroken
tokens (URLs, base64, long flags) that pre-wrap alone would leave hanging.

Same bug, fixed in every renderer of markdown code:
  desktop chat         .chat-msg-body pre (two conflicting rules, both scrolled)
  mobile chat          .mob-msg .bubble pre
  desktop notes/wiki   .notes-editor .toastui-editor-contents pre
  mobile notes         .mob-note-body .toastui-editor-contents pre
  action run detail    .action-run-detail pre (wrapped, but URLs escaped)

One block appended to each stylesheet rather than five edits in place: equal or
higher specificity and placed last, so it wins over the per-view rules and over
any highlight.js theme's lower-specificity .hljs rule. Corrected the earlier
comment that still said code blocks "cannot wrap".

The spec no longer exempts PRE/CODE from the no-horizontal-overflow check (only
TABLE may scroll inside itself), and asserts the 400-char line actually spans
several rendered lines unclipped. That second check exists because an earlier
overflow-x:hidden "passed" a no-scroll check by cutting the text off.

Only desktop chat is measured directly; the other four share the identical rule.
CI's mobile pixel baselines are the broader check on them.
@sixvolts
sixvolts merged commit 4221b2d into main Oct 2, 2026
1 check passed
@sixvolts
sixvolts deleted the ci/wrap-code-blocks branch October 2, 2026 21:37
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