style(web): adjust message padding and alignment for better layout

[Sepush]

This PR improves the message style in the web UI:

• Align user messages to the right with bubble widths match their content and related attachments layout.
• Fix ActivityStatusIndicator animation truncation by adding consistent px-3 padding to tool components and assistant messages.

before

desktop

mobile

after

desktop

mobile

---

[devin-ai-integration]

Devin Review found 1 potential issue.

View 4 additional findings in Devin Review.

[devin-ai-integration]

🟡 Double px-3 padding on meta text nested inside already-padded MessageContent

The assistantMetaTextClass was changed to include px-3, but it is used inside MessageContent containers that already receive px-3 via assistantContentClass. This causes double horizontal padding (24px total instead of 12px) on meta text elements, making them visually misaligned with sibling content.

Affected locations and root cause

The PR adds px-3 to both assistantContentClass (line 55) and assistantMetaTextClass (line 56):

const assistantContentClass = "w-full max-w-full px-3 text-sm leading-relaxed";
const assistantMetaTextClass = "px-3 text-xs text-muted-foreground";

The assistantMetaTextClass is used as a child inside MessageContent className={assistantContentClass} in three places:

1. assistant-message.tsx:165 — "Streaming response…" inside renderAssistantText
2. assistant-message.tsx:212 — "Reasoning through the request…" inside renderChainOfThoughtMessage
3. assistant-message.tsx:386 — "Assembling snippet…" inside renderCodeMessage

In all three cases, the parent MessageContent already applies px-3 from assistantContentClass, so the child div's px-3 adds an extra 12px of padding, pushing the meta text further right than intended.

Note that the usage in renderToolMessage (lines 352-356) is correct — there the meta text divs are direct children of a React fragment <>, not nested inside a MessageContent with assistantContentClass, so the single px-3 is appropriate.

Impact: Meta text like "Streaming response…", "Reasoning through the request…", and "Assembling snippet…" will appear with extra indentation compared to the main message content above them.

Prompt for agents

The assistantMetaTextClass has px-3 added, but it is used both inside MessageContent (which already has px-3 from assistantContentClass) and outside it (in renderToolMessage). To fix this:

Option A: Remove px-3 from assistantMetaTextClass on line 56, and instead add px-3 only at the usage sites in renderToolMessage (lines 352, 354, 356) where the meta text is NOT inside a MessageContent with assistantContentClass.

Option B: Keep assistantMetaTextClass as-is but remove px-3 from the specific usages at lines 165, 212, and 386 where the div is already inside a padded MessageContent. For example, change `className={\`mt-2 ${assistantMetaTextClass}\`}` to `className="mt-2 text-xs text-muted-foreground"` at those locations.

Either approach ensures meta text has exactly one level of px-3 padding in all contexts.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[Copilot]

Pull request overview

This PR adjusts chat message layout styling in the web UI to improve horizontal spacing, alignment, and attachment/tool presentation across screen sizes.

Changes:

• Tweaks the virtualized message list container padding and adds per-message horizontal margins for user content and attachments.
• Adds horizontal padding to assistant message content/meta and tool components.
• Updates message alignment rules (right-align user messages) and refines attachment layout behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
web/src/features/chat/components/virtualized-message-list.tsx	Adjusts list padding and applies horizontal margins to user content and attachments.
web/src/features/chat/components/assistant-message.tsx	Adds horizontal padding to assistant content and meta text classes.
web/src/components/ai-elements/tool.tsx	Adds padding to tool container and makes the tool header trigger full-width.
web/src/components/ai-elements/message.tsx	Right-aligns user messages, constrains user bubble max-width, and changes attachments flex alignment.

---

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

[Copilot]

assistantMetaTextClass now includes px-3, but it’s rendered inside MessageContent that already has px-3 via assistantContentClass (e.g. streaming/meta lines in renderAssistantText, renderChainOfThoughtMessage, renderCodeMessage). This results in double horizontal padding for meta text compared to the main response content. Consider removing horizontal padding from assistantMetaTextClass and instead adding padding only where the meta text is rendered outside a padded container (e.g. the tool-message footer lines after <Tool />).

Suggested change

	const assistantMetaTextClass = "px-3 text-xs text-muted-foreground";
	const assistantMetaTextClass = "text-xs text-muted-foreground";

[Copilot]

VirtuosoList no longer applies any base (xs) horizontal padding (px-*). Some message variants (e.g. status messages) don’t add their own px/mx, so on small screens their content will render flush against the viewport edge. Consider restoring a base px-3 here, or ensuring every message variant rendered in this list applies consistent horizontal inset.

Suggested change

	className={cn("flex flex-col py-4 sm:px-3 lg:px-5", className)}
	className={cn("flex flex-col py-4 px-3 sm:px-3 lg:px-5", className)}

[Copilot]

The new max-w-[calc(100%-68px)] / sm:max-w-[calc(100%-88px)] introduces hard-coded layout offsets (68px/88px) with no obvious tie to a shared token (avatar size, gutter, etc.). This makes future layout tweaks brittle. Consider deriving these values from existing spacing/size utilities (or documenting what the offsets represent) so the intent stays clear and the numbers don’t drift from the actual UI dimensions.