fix(chat): size user message bubbles to fit text content

[graycyrus]

Summary

• User-side chat bubbles now shrink to fit their text content instead of stretching to full width
• Long unbroken strings wrap properly instead of overflowing the bubble

Changes

• app/src/pages/Conversations.tsx: use w-fit max-w-[75%] for user messages (agent bubbles unchanged), add break-words overflow-hidden to the user bubble div

Test plan

• Send a short message — bubble should be narrow, fitting the text
• Send a long message — bubble should wrap at 75% max width
• Send a long unbroken string — text should wrap to next line, not overflow

Summary by CodeRabbit

• Bug Fixes

  • Prevented long words/strings from overflowing chat message bubbles.

• Style

  • User message bubbles now size to their content for a tighter fit while keeping layout caps.
  • Improved text wrapping and overflow handling in conversations for clearer, more consistent message display.

[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: 80f6066c-adcc-408a-bd37-0f23e0f94494

📥 Commits

Reviewing files that changed from the base of the PR and between e36c19f and 41d5594.

📒 Files selected for processing (1)

• app/src/pages/Conversations.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• app/src/pages/Conversations.tsx

---

📝 Walkthrough

Walkthrough

User message bubbles in Conversations.tsx were changed to size to their content using w-fit (capped by existing md:max-w-[75%]); agent bubbles keep full-width behavior. User bubbles also gained break-words and overflow-hidden to prevent long-string overflow.

Changes

Cohort / File(s)	Summary
Message Bubble Styling app/src/pages/Conversations.tsx	Changed user message wrapper to w-fit (content-sized, still capped by md:max-w-[75%]); added break-words and overflow-hidden to user bubbles to prevent long-string overflow. Agent bubble behavior unchanged.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 I nibbled on CSS tonight,
Made user bubbles snug and right.
Words now wrap, no messy flight,
Tiny hops of UI delight. 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: user message bubbles now size to fit text content instead of full width, which is the core objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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