Move user message metadata outside the chat bubble

[dbalders]

What Changed

Added a wrapper div around user chat messages so only the message content keeps the gray background, while the timestamp and action buttons render outside the bubble on the white background.

Why

Fixes #832 - Just feel this has a better look, especially for longer messages so there isn't a huge gray area below every message.

UI Changes

Before:

After:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes

Note

Move user message metadata outside the chat bubble in MessagesTimeline

Restructures the user message layout in ChatView.tsx so the action toolbar sits below the bubble as a sibling element rather than inside it. The bubble is now wrapped in a right-aligned flex column container, sized to its content with w-fit, and the toolbar gets slight right padding (pr-1) to align with the bubble edge.

^{Macroscope summarized afa678c.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 589fd18c-777b-477f-b12a-71e1cd68b90e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can customize the high-level summary generated by CodeRabbit.

Configure the reviews.high_level_summary_instructions setting to provide custom instructions for generating the high-level summary.

[Copilot]

Pull request overview

This PR updates the user-message layout in the chat timeline so the “bubble” background applies only to the message content (text/attachments), while the timestamp and hover action buttons render outside the bubble on the page background—addressing the UI concern raised in #832.

Changes:

• Wrapped user messages in an outer flex column container and moved the metadata/actions row outside the bubble container.
• Adjusted sizing/alignment classes to keep the bubble fitting content while preserving the existing max width constraint.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dbalders]

Rebased onto latest main and reapplied the same UI change into MessagesTimeline instead of ChatView.