From d58f13e1ce5ccb304b1b4d3ec636c5761b0cb2dc Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Mon, 2 Nov 2026 14:41:56 +0700
Subject: [PATCH] fix(chat): conversation column widens to 64rem instead of
 48rem

A wide pane left the chat squeezed into a 768px column with empty space
either side, so a wide table was cut off. The message list, the prompt
box and the session replay now share max-w-5xl.
---
 client/src/components/conversation/MessageList.tsx | 2 +-
 client/src/components/lanes/SessionReplay.tsx      | 6 +++---
 client/src/components/run/PaneChat.tsx             | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/conversation/MessageList.tsx b/client/src/components/conversation/MessageList.tsx
index bb1d417f..281a8234 100644
--- a/client/src/components/conversation/MessageList.tsx
+++ b/client/src/components/conversation/MessageList.tsx
@@ -865,7 +865,7 @@ function MessageListView({
           className={
             compact
               ? "space-y-3 py-1 pr-2"
-              : "mx-auto flex w-full max-w-3xl flex-col gap-3 px-4 py-6"
+              : "mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-6"
           }
         >
           {items.map((item) => {
diff --git a/client/src/components/lanes/SessionReplay.tsx b/client/src/components/lanes/SessionReplay.tsx
index c5d6aa4d..a5996acc 100644
--- a/client/src/components/lanes/SessionReplay.tsx
+++ b/client/src/components/lanes/SessionReplay.tsx
@@ -145,7 +145,7 @@ export function SessionReplay({
       {livePane ? (
         <div
           data-testid="session-replay-live"
-          className="mx-auto flex w-full max-w-3xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
+          className="mx-auto flex w-full max-w-5xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
         >
           <span className="min-w-0 flex-1">{t("replay.live")}</span>
           <button
@@ -160,7 +160,7 @@ export function SessionReplay({
       ) : session && !resumable ? (
         <div
           data-testid="session-replay-no-resume"
-          className="mx-auto flex w-full max-w-3xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
+          className="mx-auto flex w-full max-w-5xl items-center gap-2 rounded-2xl border border-border p-3 text-xs text-fg-secondary"
         >
           <span className="min-w-0 flex-1">{t("replay.noResume", { tool })}</span>
           <button
@@ -172,7 +172,7 @@ export function SessionReplay({
           </button>
         </div>
       ) : (
-        <div className="mx-auto w-full max-w-3xl rounded-2xl border border-border p-2 shadow-sm transition-colors focus-within:border-accent/50">
+        <div className="mx-auto w-full max-w-5xl rounded-2xl border border-border p-2 shadow-sm transition-colors focus-within:border-accent/50">
           <PromptEditor
             bare
             images={images}
diff --git a/client/src/components/run/PaneChat.tsx b/client/src/components/run/PaneChat.tsx
index 047d4696..65ab7cb8 100644
--- a/client/src/components/run/PaneChat.tsx
+++ b/client/src/components/run/PaneChat.tsx
@@ -858,7 +858,7 @@ export const PaneChat = memo(function PaneChat({
           )}
         </div>
         <div className="mx-4">
-          <div className="mx-auto w-full max-w-3xl">
+          <div className="mx-auto w-full max-w-5xl">
             {menu && (
               <PaneMenuCard
                 // A new question starts with its field closed.