fix: prevent long text overflow in agent chat message bubbles#336
fix: prevent long text overflow in agent chat message bubbles#336jamiepine merged 1 commit intospacedriveapp:mainfrom
Conversation
Add overflow-x-hidden to messages scroll container, min-w-0 overflow-hidden to user message bubble, and break-all with whitespace-pre-wrap to message text to ensure long unbreakable strings wrap correctly.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughCSS styling adjustments to the WebChatPanel component to prevent horizontal overflow in the message list and ensure proper text wrapping and truncation for long user messages. Changes include overflow-hidden properties and text wrapping directives on message containers and content. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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. Comment |
![tembo[bot]](https://avatars.githubusercontent.com/in/1223475?s=60&v=4){kind=small}
| <div className="max-w-[85%] rounded-2xl rounded-br-md bg-accent/10 px-4 py-2.5"> | ||
| <p className="text-sm text-ink">{item.content}</p> | ||
| <div className="max-w-[85%] min-w-0 overflow-hidden rounded-2xl rounded-br-md bg-accent/10 px-4 py-2.5"> | ||
| <p className="text-sm text-ink break-all whitespace-pre-wrap">{item.content}</p> |
There was a problem hiding this comment.
break-all can be pretty aggressive for normal prose (may split words mid-word). You might get the same “never overflow” behavior with overflow-wrap:anywhere, which only breaks when needed.
| <p className="text-sm text-ink break-all whitespace-pre-wrap">{item.content}</p> | |
| <p className="text-sm text-ink break-words [overflow-wrap:anywhere] whitespace-pre-wrap">{item.content}</p> |
2 participants
Problem
On the
/agents/{id}/chatpage, long unbreakable text (e.g. URLs or continuous strings without spaces) overflowed to the right outside the viewport instead of wrapping within the message bubble.Root Cause
overflow-y-autobut no horizontal overflow constraint, allowing content to expand beyond the viewport width.<p>usedbreak-wordswhich only breaks at word boundaries — ineffective for continuous strings with no spaces.Changes
interface/src/components/WebChatPanel.tsxoverflow-x-hiddento the messages scroll container to clamp horizontal overflowmin-w-0 overflow-hiddento the user message bubble div to enforcemax-w-[85%]constraint inside flex layoutbreak-words→break-allon the message<p>to force-break continuous stringswhitespace-pre-wrapto preserve intentional line breaksTesting
Verified with a long continuous string input (
thisisthelongline...) — text now wraps correctly within the bubble.Before
Fixed