Fix messages overflow/wrapping

[TWilson023]

Before	After

Summary by CodeRabbit

• Bug Fixes
  • Fixed message text wrapping to prevent content overflow in the messages panel.
  • Improved message container layout so messages can shrink correctly and use available width on narrow screens.
  • Ensured message bubbles wrap long words and maintain consistent appearance for both sender and receiver sides.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
dub	Ready	Preview	Oct 17, 2025 4:25pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

[coderabbitai]

Walkthrough

Replaced the previous bubble width constraint with max-w-[min(100%,512px)], added break-words and maintained whitespace-pre-wrap on message content, and added min-w-0 to outer flex containers so message items can shrink and long words wrap correctly.

Changes

Cohort / File(s)	Change Summary
Messages panel UI apps/web/ui/messages/messages-panel.tsx	Added min-w-0 to outer flex containers; replaced max-w-lg with max-w-[min(100%,512px)] on message bubbles; added w-full and break-words alongside whitespace-pre-wrap to message text wrappers to enable proper width limiting and word-wrapping.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• steven-tey

Poem

A rabbit hops through styled lines,
min-w-0 lets layout signs,
max bounds tuned to fit the view,
break-words coax long words anew,
Messages snug — a tidy few. 🐇✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "Fix messages overflow/wrapping" is directly related to the main changes in the changeset. The modifications focus on addressing message display issues by adjusting flex container constraints with min-w-0, replacing the width constraint to max-w-[min(100%,512px)], and adding break-words styling to enable proper text wrapping within message bubbles. The title is concise, clear, and specific, immediately conveying to a reviewer that the changes are addressing overflow and text-wrapping problems in the messages component. The title avoids vague terminology and accurately summarizes the primary purpose of the changeset.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch messages-wrap

---

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.}