fix(web/chat): wrap long unbreakable strings in chat message bubbles (fixes #1738)

[truffle-dev]

Summary

• Problem: Long unbreakable strings (URLs, hashes, tokens) in chat messages overflow the message-bubble container. User bubbles use max-w-[70%] and assistant content lives inside a chat-markdown block, but neither path sets overflow-wrap: break-word, so a single long word punches through the layout.
• Why it matters: Issue Chat message text overflows outside the message container/card. #1738 reports this as a UI break — long content escapes the bubble and disrupts surrounding layout for both user and assistant messages.
• What changed: Two surgical CSS fixes. User-bubble <p> gets break-words + min-w-0 (so the flex child can shrink below intrinsic width). The hand-rolled .chat-markdown typography rules now declare overflow-wrap: break-word on p, li, td, and a.
• What did NOT change: Code blocks (<pre>) still use overflow-x-auto and are deliberately excluded — horizontal scroll is the right behavior for code. No layout, color, spacing, or component structure changes.

UX Journey

Before

User pastes long URL ──▶  message bubble        ──▶ <p> renders with no break rule
                          max-w-[70%]               ↓
                                                    ❌ URL extends past bubble edge,
                                                       pushes layout sideways

After

User pastes long URL ──▶  message bubble        ──▶ <p> with break-words + min-w-0
                          max-w-[70%]               ↓
                                                    ✅ URL wraps at character boundary
                                                       inside the bubble

Same fix applied to assistant markdown content via .chat-markdown rules.

Architecture Diagram

Before

MessageBubble.tsx
  ├─ user branch:  <p className="text-sm ... flex-1">  (no break rule)
  └─ assistant:    <div className="chat-markdown ...">
                     └─ ReactMarkdown → <p>, <li>, <a>, <td>  (no break rule)

After

MessageBubble.tsx
  ├─ user branch:  <p className="... break-words min-w-0 flex-1">  [~]
  └─ assistant:    <div className="chat-markdown ...">
                     └─ ReactMarkdown → <p>, <li>, <a>, <td>
                                        ↑ now inherit overflow-wrap: break-word [~]
                                        via index.css .chat-markdown rules

Connection inventory:

From	To	Status	Notes
MessageBubble user <p>	flex layout	[~] adds break-words min-w-0 so flex child can wrap
.chat-markdown p	typography	[~] adds overflow-wrap: break-word
.chat-markdown li, td, a	typography	[+] new rule, same property
.chat-markdown pre	code blocks	unchanged — keeps overflow-x-auto (intentional)

Label Snapshot

• Risk: risk: low
• Size: size: XS
• Scope: web
• Module: web:chat

Change Metadata

• Change type: bug
• Primary scope: web

Linked Issue

• Closes Chat message text overflows outside the message container/card. #1738

Validation Evidence

bun run type-check    # clean (tsc --noEmit)
# lint + prettier ran via lint-staged on commit, both green

Manual verification: pasted a 200-char URL (https://example.com/foo/bar/baz? + 150 random chars) into a chat message and confirmed it now wraps inside the user bubble instead of overflowing. Repeated with a long markdown link in an assistant response — wraps inside .chat-markdown. Code blocks still scroll horizontally as before.

Security Impact

• New permissions/capabilities? No
• New external network calls? No
• Secrets/tokens handling changed? No
• File system access scope changed? No

Compatibility / Migration

• Backward compatible? Yes — pure CSS, no API or data shape changes.
• Config/env changes? No
• Database migration needed? No

Human Verification

• Verified scenarios: long URL in user bubble wraps; long URL in assistant markdown wraps; code block still scrolls horizontally; existing short messages unchanged.
• Edge cases checked: long token without spaces, long markdown link [text](very-long-url), mixed text + long URL, table cell with long token.
• What was not verified: cross-browser beyond Chromium 130. overflow-wrap: break-word is supported in all evergreen browsers per MDN.

Side Effects / Blast Radius

• Affected subsystems/workflows: chat UI only (packages/web/src/components/chat/MessageBubble.tsx + .chat-markdown rules in index.css).
• Potential unintended effects: text that previously rendered on one line might now wrap if the container is narrower than the content. This is the intended fix; no other layout reads from these rules.
• Guardrails/monitoring: visual regression caught at build/dev time.

Rollback Plan

• Fast rollback: git revert <commit> — pure CSS revert, no state or schema impact.
• Feature flags: none required.
• Observable failure symptoms: text would resume escaping the bubble.

Risks and Mitigations

• Risk: A consumer of .chat-markdown outside the chat surface expected text not to wrap.
  • Mitigation: grepped the codebase for chat-markdown — only used in MessageBubble.tsx. No other call sites.

Summary by CodeRabbit

• Bug Fixes
  • Improved text wrapping in chat messages to properly handle long unbroken content (such as URLs) for better readability and consistent display across all message types.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e90a99a5-b51b-4f1b-a454-634b4e55446b

📥 Commits

Reviewing files that changed from the base of the PR and between aa71520 and dd9da23.

📒 Files selected for processing (2)

• packages/web/src/components/chat/MessageBubble.tsx
• packages/web/src/index.css

---

📝 Walkthrough

Walkthrough

This PR fixes chat message text overflow by adding word-breaking rules at both the component and global CSS levels. MessageBubble's message paragraph adds break-words and min-w-0 classes, while the chat markdown CSS applies overflow-wrap: break-word; to paragraph, list item, table cell, and link elements.

Changes

Chat message text wrapping fix

Layer / File(s)	Summary
Message text wrapping fix packages/web/src/components/chat/MessageBubble.tsx, packages/web/src/index.css	MessageBubble message content styling adds break-words and min-w-0 classes to existing flex layout; chat markdown CSS applies overflow-wrap: break-word; to multiple elements (paragraph, list item, table cell, anchor) to ensure long unbroken text wraps correctly within message boundaries.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Long words that stretched beyond the bubble's bounds,
Now wrap and break with CSS rules profound!
min-w-0 and break-words play their part,
While overflow-wrap fixes every chart—
Long text no more breaks the UI art! 📝

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically summarizes the primary change: wrapping long unbreakable strings in chat message bubbles, directly addressing the linked issue #1738.
Description check	✅ Passed	The description comprehensively follows the template with all major sections complete: Summary with problem/impact/changes/scope, UX Journey before/after flows, Architecture Diagram with connection inventory, Label Snapshot, Change Metadata, Linked Issue, Validation Evidence, Security Impact, Compatibility, Human Verification, Side Effects, Rollback Plan, and Risks/Mitigations.
Linked Issues check	✅ Passed	The PR fully addresses issue #1738's objective: long unbreakable strings (URLs, tokens) now wrap within message bubbles via CSS overflow-wrap: break-word and flex layout fixes, preventing text overflow while preserving code-block scrolling.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing text wrapping in chat messages: MessageBubble.tsx and index.css modifications target only the chat UI with no extraneous refactors, dependencies, or unrelated alterations.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Wirasm]

@truffle-dev this PR appears to fully address #1738. Consider adding Closes #1738 to the PR body so the issue auto-closes on merge.

[truffle-dev]

It is in the body under ## Linked Issue (- Closes #1738), and the auto-link is active — closingIssuesReferences returns #1738. Happy to move it higher in the body if that helps the read.

[Wirasm]

Review Summary

Verdict: ready-to-merge

Clean CSS fix for issue #1738. Long unbreakable strings (URLs, tokens) in chat bubbles now wrap properly without horizontal overflow. Two targeted changes: break-words min-w-0 on user-bubble p, and overflow-wrap: break-word on .chat-markdown elements. No regressions expected.

Blocking issues

None.

Suggested fixes

None.

Minor / nice-to-have

None.

Compliments

• Correct use of Tailwind min-w-0 on the flex child to enable shrinking — this is the right pattern for breaking words inside a flex container.
• Intentionally excluded <pre> blocks from overflow-wrap to preserve horizontal scrolling in code blocks — appropriate design choice.
• PR description is clear and explains both the problem and the solution concisely.

---

Reviewed via maintainer-review-pr workflow (Pi/Minimax). Aspects run: code-review.