openclaw - 💡(How to fix) Fix [Bug]: Control UI chat can cut off long inline code in message bubbles

Bug type

Behavior bug (incorrect output/state without crash)

Beta release blocker

No

Summary

In Control UI chat, long inline markdown code tokens can appear visually cut off on the right because inline <code> is configured not to wrap while the chat thread hides horizontal overflow.

Steps to reproduce

1. Open Control UI chat.
2. Render an assistant message containing a long inline code token with no spaces, e.g. `openclaw_message_send_channel_webchat_target_example_com_thread_very_long_identifier_without_spaces_1234567890abcdefghijklmnopqrstuvwxyz`.
3. Observe the right edge of the inline code in the message bubble at narrow viewport widths (and reproducibly in fixture-based responsive browser layout tests).

Expected behavior

Inline code text in chat bubbles remains readable and fully visible within the bubble (wrapping when needed), instead of being clipped.

Actual behavior

Inline code can be clipped/cut off at the right edge of the bubble.

Observed code path:

• ui/src/styles/chat/text.css had inline code rules:
  • overflow-wrap: normal;
  • word-break: keep-all;
• ui/src/styles/chat/layout.css sets .chat-thread { overflow-x: hidden; }

This combination prevents wrapping for long unbroken inline code and hides overflow.

OpenClaw version

2026.5.14

Operating system

Linux 6.6.114.1-microsoft-standard-WSL2 (x64)

Install method

Source checkout + pnpm/vitest local test run

Model

N/A (UI-only rendering bug; no model behavior required to reproduce)

Provider / routing chain

N/A (UI-only rendering bug in Control UI)

Additional provider/model setup details

N/A

Logs, screenshots, and evidence

Root-cause CSS before fix:

ui/src/styles/chat/text.css
.chat-text :where(:not(pre) > code) {
  overflow-wrap: normal;
  word-break: keep-all;
}

ui/src/styles/chat/layout.css
.chat-thread {
  overflow-x: hidden;
}

Patch applied:

ui/src/styles/chat/text.css
.chat-text :where(:not(pre) > code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

Regression test added:
- ui/src/ui/chat/chat-responsive.browser.test.ts
  - wraps long inline code without clipping at 320x568 and 1366x900

Verification command output:
$ pnpm vitest run src/ui/chat/chat-responsive.browser.test.ts
RUN v4.1.6 /home/galini/GitHub/openclaw/.worktrees/chat-cutoff/ui
↓ unit-node src/ui/chat/chat-responsive.browser.test.ts (20 tests | 20 skipped)
Test Files 1 skipped (1)
Tests 20 skipped (20)
Duration 2.09s

(Chromium is unavailable in this environment, so browser tests were discovered but skipped.)

Impact and severity

• Affected users/systems/channels: Control UI chat users viewing messages with long inline code tokens.
• Severity: Medium (readability/UX bug; does not crash app).
• Frequency: Deterministic when message contains sufficiently long unbroken inline code.
• Consequence: Users may not see full command/identifier content in assistant replies.

Additional information

• Investigation outcome: this is a markdown/CSS overflow issue, not a session-switch race issue.
• Fix PR: https://github.com/openclaw/openclaw/pull/81931