From c8eb9a6c5ff999d23080441ab3c204f406a4286e Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 26 Apr 2026 18:04:42 +0300
Subject: [PATCH] feat: widen chat content area

Chat messages use more horizontal space
Chat input keeps its previous max width
---
 packages/ui/src/components/chat/ChatInput.tsx |  2 +-
 packages/ui/src/styles/typography.css         | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index e18adf87..f0b2e845 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -3306,7 +3306,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
             )}
             style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined}
         >
-            <div className={cn('chat-column relative overflow-visible', isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
+            <div className={cn('chat-input-column relative overflow-visible', isDesktopExpanded && 'flex flex-1 min-h-0 flex-col')}>
                 <AttachedFilesList />
                 <QueuedMessageChips
                     onEditMessage={handleQueuedMessageEdit}
diff --git a/packages/ui/src/styles/typography.css b/packages/ui/src/styles/typography.css
index 644ed4b4..3d26a381 100644
--- a/packages/ui/src/styles/typography.css
+++ b/packages/ui/src/styles/typography.css
@@ -25,13 +25,19 @@
   }
 
   .chat-column {
+    width: min(100%, 64rem);
+    margin-inline: auto;
+    padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
+  }
+
+  .chat-input-column {
     width: min(100%, 48rem);
     margin-inline: auto;
     padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
   }
 
   .chat-message-column {
-    width: min(100%, 48rem);
+    width: min(100%, 64rem);
     margin-inline: auto;
     padding-inline: calc(clamp(0.75rem, 2.5vw, 1rem) * var(--padding-scale, 1));
   }
@@ -41,6 +47,10 @@
       padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
     }
 
+    .chat-input-column {
+      padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
+    }
+
     .chat-message-column {
       padding-inline: calc(clamp(1rem, 2.5vw, 1.5rem) * var(--padding-scale, 1));
     }