From b55e695541cc4595cb97573322db6af94ea79b4d Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Thu, 16 Jan 2025 23:28:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20Maximize=20Chat=20Space?=
 =?UTF-8?q?=20for=20Agent=20Messages=20(#5330)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Messages/ContentRender.tsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Messages/ContentRender.tsx b/client/src/components/Messages/ContentRender.tsx
index 5a6738f510..0761e3f902 100644
--- a/client/src/components/Messages/ContentRender.tsx
+++ b/client/src/components/Messages/ContentRender.tsx
@@ -56,6 +56,7 @@ const ContentRender = memo(
       setCurrentEditId,
     });
 
+    const maximizeChatSpace = useRecoilValue(store.maximizeChatSpace);
     const fontSize = useRecoilValue(store.fontSize);
     const handleRegenerateMessage = useCallback(() => regenerateMessage(), [regenerateMessage]);
     // const { isCreatedByUser, error, unfinished } = msg ?? {};
@@ -101,17 +102,31 @@ const ContentRender = memo(
         }
         : undefined;
 
+    const baseClasses =
+      'final-completion group mx-auto flex flex-1 gap-3 transition-all duration-300 transform-gpu';
+
+    const cardClasses =
+      'relative w-full gap-1 rounded-lg border border-border-medium bg-surface-primary-alt p-2 md:w-1/2 md:gap-3 md:p-4';
+
+    const chatSpaceClasses = maximizeChatSpace
+      ? 'w-full max-w-full md:px-5 lg:px-1 xl:px-5'
+      : 'md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5';
+
+    const conditionalClasses = {
+      latestCard: isLatestCard ? 'bg-surface-secondary' : '',
+      cardRender: showCardRender ? 'cursor-pointer transition-colors duration-300' : '',
+      focus: 'focus:outline-none focus:ring-2 focus:ring-border-xheavy',
+    };
+
     return (
       <div
         aria-label={`message-${msg.depth}-${msg.messageId}`}
         className={cn(
-          'final-completion group mx-auto flex flex-1 gap-3',
-          isCard === true
-            ? 'relative w-full gap-1 rounded-lg border border-border-medium bg-surface-primary-alt p-2 md:w-1/2 md:gap-3 md:p-4'
-            : 'md:max-w-3xl md:px-5 lg:max-w-[40rem] lg:px-1 xl:max-w-[48rem] xl:px-5',
-          isLatestCard === true ? 'bg-surface-secondary' : '',
-          showCardRender ? 'cursor-pointer transition-colors duration-300' : '',
-          'focus:outline-none focus:ring-2 focus:ring-border-xheavy',
+          baseClasses,
+          isCard ? cardClasses : chatSpaceClasses,
+          conditionalClasses.latestCard,
+          conditionalClasses.cardRender,
+          conditionalClasses.focus,
         )}
         onClick={clickHandler}
         onKeyDown={(e) => {