From 94bec5f2a096f032493eecd67e1361d9e5390efa Mon Sep 17 00:00:00 2001
From: Manmohan <66306483+manmohan659@users.noreply.github.com>
Date: Thu, 16 Apr 2026 20:23:56 -0400
Subject: [PATCH] fix(frontend): assistant messages fill the chat column (#42)

Assistant responses were capped at max-w-[75%] of the column, so long
replies broke into a narrow block with dead space on the right. Cap
only applies to user bubbles now; assistant messages use w-full of the
max-w-3xl content column, matching how ChatGPT/Claude render replies.
Also bumps message vertical spacing from mb-3 to mb-5.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 services/frontend/components/chat/MessageBubble.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/services/frontend/components/chat/MessageBubble.tsx b/services/frontend/components/chat/MessageBubble.tsx
index 6ef17044..b7a0c987 100644
--- a/services/frontend/components/chat/MessageBubble.tsx
+++ b/services/frontend/components/chat/MessageBubble.tsx
@@ -75,13 +75,12 @@ export default function MessageBubble({ message, isStreaming }: Props) {
   }
 
   return (
-    <div className={clsx('flex mb-3 animate-fade-in', isUser ? 'justify-end' : 'justify-start')}>
+    <div className={clsx('flex mb-5 animate-fade-in', isUser ? 'justify-end' : 'justify-start')}>
       <div
         className={clsx(
-          'max-w-[85%] md:max-w-[75%]',
           isUser
-            ? 'bg-cream dark:bg-ink-elev border border-cream-border dark:border-ink-border rounded-[1.25rem] px-4 py-3'
-            : 'bg-transparent px-2 py-1',
+            ? 'max-w-[85%] md:max-w-[75%] bg-cream dark:bg-ink-elev border border-cream-border dark:border-ink-border rounded-[1.25rem] px-4 py-3'
+            : 'w-full bg-transparent px-1 py-1',
         )}
       >
         {!isUser && isStreaming && message.content.length === 0 ? (