From 042932f56678536f4ae62d96138c9a2c64660377 Mon Sep 17 00:00:00 2001
From: Alejandro Tamayo <aletc1@msn.com>
Date: Fri, 17 Apr 2026 17:44:53 +0200
Subject: [PATCH] ui(agents): widen chat column from max-w-2xl to max-w-4xl

Chat content was capped at 672px, leaving excessive whitespace on wide
windows and cramping bash/tool output. Bumps the message column, input
area, status cards, and loading wrapper to 896px (+33%) so they stay
aligned and tool renderers (which inherit width) breathe.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer/features/agents/main/active-chat.tsx     | 10 +++++-----
 src/renderer/features/agents/main/chat-input-area.tsx |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/renderer/features/agents/main/active-chat.tsx b/src/renderer/features/agents/main/active-chat.tsx
index cf85ed178..8b24bbd8b 100644
--- a/src/renderer/features/agents/main/active-chat.tsx
+++ b/src/renderer/features/agents/main/active-chat.tsx
@@ -4647,7 +4647,7 @@ const ChatViewInner = memo(function ChatViewInner({
           />
           {/* Workspace subtitle: repo • branch */}
           {(workspaceRepoName || workspaceBranch) && (
-            <div className="max-w-2xl mx-auto px-4">
+            <div className="max-w-4xl mx-auto px-4">
               <span className="text-xs text-muted-foreground/50 truncate block">
                 {[workspaceRepoName, workspaceBranch].filter(Boolean).join(" • ")}
               </span>
@@ -4692,7 +4692,7 @@ const ChatViewInner = memo(function ChatViewInner({
       >
         <div
           ref={contentWrapperRef}
-          className="px-2 max-w-2xl mx-auto -mb-4 space-y-4"
+          className="px-2 max-w-4xl mx-auto -mb-4 space-y-4"
           style={{
             paddingBottom: "32px",
           }}
@@ -4724,7 +4724,7 @@ const ChatViewInner = memo(function ChatViewInner({
       {/* User questions panel - shows for both live (pending) and expired (timed out) questions */}
       {displayQuestions && (
         <div className="px-4 relative z-20">
-          <div className="w-full px-2 max-w-2xl mx-auto">
+          <div className="w-full px-2 max-w-4xl mx-auto">
             <AgentUserQuestion
               ref={questionRef}
               pendingQuestions={displayQuestions}
@@ -4739,7 +4739,7 @@ const ChatViewInner = memo(function ChatViewInner({
       {/* Stacked cards container - queue + status */}
       {shouldShowStackedCards && (
           <div className="px-2 -mb-6 relative z-10">
-            <div className="w-full max-w-2xl mx-auto px-2">
+            <div className="w-full max-w-4xl mx-auto px-2">
               {/* Queue indicator card - top card */}
               {queue.length > 0 && (
                 <AgentQueueIndicator
@@ -7831,7 +7831,7 @@ Make sure to preserve all functionality from both branches when resolving confli
 
               {/* Disabled input while loading */}
               <div className="px-2 pb-2">
-                <div className="w-full max-w-2xl mx-auto">
+                <div className="w-full max-w-4xl mx-auto">
                   <div className="relative w-full">
                     <PromptInput
                       className="border bg-input-background relative z-10 p-2 rounded-xl opacity-50 pointer-events-none"
diff --git a/src/renderer/features/agents/main/chat-input-area.tsx b/src/renderer/features/agents/main/chat-input-area.tsx
index 30ad3f25b..d2edb83a4 100644
--- a/src/renderer/features/agents/main/chat-input-area.tsx
+++ b/src/renderer/features/agents/main/chat-input-area.tsx
@@ -1247,7 +1247,7 @@ export const ChatInputArea = memo(function ChatInputArea({
       }}
       className="px-2 pb-2 shadow-sm shadow-background relative z-10"
     >
-      <div className="w-full max-w-2xl mx-auto">
+      <div className="w-full max-w-4xl mx-auto">
         <div
           className="relative w-full"
           onDragOver={handleDragOver}