fix(ui): wrap long inline code in chat bubbles (#81931)

Wrap long inline code tokens inside chat bubbles so unbroken paths and identifiers stay within the message bubble.\n\nFixes #81932.
This commit is contained in:
Galin Iliev
2026-05-14 23:31:45 -07:00
committed by GitHub
parent 4a188e7ca5
commit 0cbd2d3b08
3 changed files with 37 additions and 2 deletions
+1
View File
@@ -606,6 +606,7 @@ Docs: https://docs.openclaw.ai
- Plugins/runtime: attribute deprecated runtime config load/write warnings to the plugin id and source that triggered them so logs and plugin doctor runs are actionable. Refs #81394. (#81425) Thanks @BKF-Gitty.
- Agents/cron: honor a cron payload's explicit `timeoutSeconds` for the LLM idle watchdog even when it numerically equals `agents.defaults.timeoutSeconds`, preserving explicit per-run timeout intent and preventing stalled streaming replies from being cut to the implicit 120s cap. (#79426) Thanks @legolaz8451.
- Codex app-server: keep the short post-tool completion watchdog armed across dynamic tool completion bookkeeping so embedded Codex runs fail fast and release their session lane when Codex goes quiet after a tool result. (#81697) Thanks @mbelinky.
- Control UI/WebChat: wrap long inline code tokens inside chat bubbles instead of clipping them at the bubble edge. Fixes #81932. (#81931) Thanks @galiniliev.
- CLI/media: render terminal QR codes with full-block characters by default so the bundled `qrcode` terminal renderer does not emit a pathologically dense ANSI final row in compact half-block mode that breaks scanning in some terminals. Fixes #77820. Thanks @KrasimirKralev.
- Agents/compaction: read post-compaction AGENTS.md refresh context from the queued run workspace instead of the runner process cwd, so CLI-backed follow-up turns re-inject the correct workspace startup rules after compaction. Fixes #70541. (#75532) Thanks @vyctorbrzezowski.
- Agents/read tool: treat positive offsets beyond EOF as empty ranges instead of surfacing the upstream read error, so stale pagination cursors no longer crash tool calls while unrelated read failures still fail loud. Fixes #62466. (#75536) Thanks @vyctorbrzezowski.
+2 -2
View File
@@ -93,8 +93,8 @@
background: rgba(0, 0, 0, 0.15);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
overflow-wrap: normal;
word-break: keep-all;
overflow-wrap: anywhere;
word-break: break-word;
}
.chat-text :where(pre) {
@@ -411,6 +411,40 @@ describeBrowserLayout("chat responsive browser layout", () => {
},
);
it.each([
[320, 568],
[1366, 900],
] as const)("wraps long inline code without clipping at %sx%s", async (width, height) => {
const page = await browser.newPage({ viewport: { width, height } });
try {
await page.setContent(
`<!doctype html><html><head><style>${readUiCss()}</style></head><body>
<div class="chat-thread" role="log">
<div class="chat-thread-inner">
<div class="chat-group assistant">
<div class="chat-avatar assistant">A</div>
<div class="chat-group-messages">
<div class="chat-bubble">
<div class="chat-text">
<p><code>openclaw_message_send_channel_webchat_target_example_com_thread_very_long_identifier_without_spaces_1234567890abcdefghijklmnopqrstuvwxyz</code></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>`,
);
await expectNoHorizontalOverflow(page);
const bubble = await getRect(page, ".chat-bubble");
const inlineCode = await getRect(page, ".chat-text p code");
expect(inlineCode.right).toBeLessThanOrEqual(bubble.right + 1);
} finally {
await page.close();
}
});
it.each(["dark", "light"] as const)(
"keeps mobile controls inside the viewport with touch targets in %s mode",
async (themeMode) => {