fix(chat): improve layout centering and reduce max-width to 650px

- Remove scrollbar-gutter issues by using stable both-edges
- Simplify message width hierarchy: single mx-auto on parent wrapper
- Use padding (9px each side) for assistant messages instead of max-width
- Reduce chat max-width from 800px to 650px for narrower layout
- Centralize spacing constants in CHAT_SPACING for maintainability
- Remove unused --chat-width-secondary CSS variable

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: fazxes

apps/agent/src/components/chat/messages/message-item.tsx

@@ -23,7 +23,7 @@ import type { ToolExecution } from '@/stores/tool-store';
 import type { FC } from 'react';
 
 import { FileIcon } from '@/components/files';
-import { CHAT_WIDTH, CHAT_WIDTH_VAR } from '@/lib/constants';
+import { CHAT_SPACING, CHAT_WIDTH, CHAT_WIDTH_VAR } from '@/lib/constants';
 
 export interface ChatMessage {
   id: string;
@@ -268,17 +268,18 @@ export const MessageItem: FC<MessageItemProps> = memo(function MessageItem({
       {message.role === 'user' ? (
         /* User message bubble */
         <div
-          className="p-2 mx-auto rounded-xl bg-card border border-border/40 shadow-[0_1px_3px_rgba(0,0,0,0.05)]"
+          className="p-2 rounded-xl bg-card border border-border/40 shadow-[0_1px_3px_rgba(0,0,0,0.05)]"
           style={{ maxWidth: `var(${CHAT_WIDTH_VAR.primary}, ${String(CHAT_WIDTH.primary)}px)` }}
         >
           <p className="text-sm leading-relaxed whitespace-pre-wrap">{message.displayedContent}</p>
         </div>
       ) : (
         /* Assistant message - no bubble, content flows naturally */
         <div
-          className="py-1 mx-auto"
+          className="py-1"
           style={{
-            maxWidth: `var(${CHAT_WIDTH_VAR.secondary}, ${String(CHAT_WIDTH.secondary)}px)`,
+            paddingLeft: CHAT_SPACING.assistantPadding,
+            paddingRight: CHAT_SPACING.assistantPadding,
           }}
         >
           {/* Thinking Box - show when thinking content exists */}

apps/agent/src/globals.css

@@ -201,11 +201,10 @@
   --terminal-cursor: oklch(0.85 0.01 75);
 
   /* Chat Layout Width System
-     Primary = input box, user message bubbles (full width)
-     Secondary = assistant content, tools (slightly narrower for visual hierarchy) */
-  --chat-max-width: 800px;
+     Primary = input box, user message bubbles, content wrapper
+     Assistant messages use padding for consistent narrower width at all screen sizes */
+  --chat-max-width: 650px;
   --chat-width-primary: var(--chat-max-width);
-  --chat-width-secondary: calc(var(--chat-max-width) - 32px);
 }
 
 /* Responsive chat widths - scales down on smaller screens */

apps/agent/src/lib/constants.ts

@@ -49,26 +49,33 @@ export const PANEL_SIZES = {
 /**
  * Chat Layout Width System
  *
- * Width hierarchy:
- * - Primary (800px): Input box, user message bubbles
- * - Secondary (768px): Assistant messages, tool widgets
+ * Layout approach:
+ * - Primary (650px max-width): Input box, user message bubbles, content wrapper
+ * - Assistant messages: Use padding for consistent narrower width at all screen sizes
  *
- * Uses CSS custom properties for responsive behavior.
- * Components should use CHAT_WIDTH_VAR with fallbacks.
+ * Uses CSS custom properties (--chat-width-primary) for responsive behavior.
+ * The responsive breakpoints in globals.css scale --chat-max-width on smaller screens.
  */
 export const CHAT_WIDTH = {
   /** Base max-width for all chat content */
-  base: 800,
-  /** Input box and user message bubbles */
-  primary: 800,
-  /** Assistant messages, tool widgets, markdown content (32px narrower) */
-  secondary: 768,
+  base: 650,
+  /** Input box, user message bubbles, content wrapper */
+  primary: 650,
   /** Dropdown menus */
   dropdown: 200,
   /** File name truncation */
   fileName: 200,
 } as const;
 
+/**
+ * Chat layout spacing
+ * Used for consistent margins/padding in chat messages
+ */
+export const CHAT_SPACING = {
+  /** Horizontal padding for assistant messages (9px each side = 18px narrower than user bubble) */
+  assistantPadding: 9,
+} as const;
+
 /**
  * CSS variable names for chat widths
  * Use these with var() in style props for responsive behavior
@@ -78,19 +85,6 @@ export const CHAT_WIDTH = {
  */
 export const CHAT_WIDTH_VAR = {
   primary: '--chat-width-primary',
-  secondary: '--chat-width-secondary',
-} as const;
-
-/**
- * @deprecated Use CHAT_WIDTH instead
- * Legacy export for backwards compatibility
- */
-export const CONTENT_WIDTH = {
-  inputBox: CHAT_WIDTH.primary,
-  messageFeed: CHAT_WIDTH.secondary,
-  dropdown: CHAT_WIDTH.dropdown,
-  fileName: CHAT_WIDTH.fileName,
-  expandedContent: 400,
 } as const;
 
 /**