From 4dfe6779699ec67d3bd1b04ebaaaffa79e9d487e Mon Sep 17 00:00:00 2001
From: Shakker <shakkerdroid@gmail.com>
Date: Sat, 11 Jul 2026 19:07:19 +0100
Subject: [PATCH] feat: center the chat conversation column

---
 ui/src/pages/chat/chat-view.ts | 7 ++++++-
 ui/src/styles/chat/layout.css  | 9 +++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/chat/chat-view.ts b/ui/src/pages/chat/chat-view.ts
index a7582b352915..29d91a0d9c4f 100644
--- a/ui/src/pages/chat/chat-view.ts
+++ b/ui/src/pages/chat/chat-view.ts
@@ -310,7 +310,12 @@ export function renderChat(props: ChatProps) {
       })}
       class="card chat"
       style=${styleMap(
-        props.chatMessageMaxWidth ? { "--chat-message-max-width": props.chatMessageMaxWidth } : {},
+        props.chatMessageMaxWidth
+          ? {
+              "--chat-thread-max-width": props.chatMessageMaxWidth,
+              "--chat-message-max-width": "100%",
+            }
+          : {},
       )}
       @drop=${(event: DragEvent) => {
         event.preventDefault();
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 09c8361c618f..a19502a87cbd 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -11,6 +11,8 @@ openclaw-chat-page {
 }
 
 .chat {
+  --chat-thread-max-width: 48rem;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -101,6 +103,13 @@ openclaw-chat-pane:has(> .chat-pane__header) .chat-thread {
   margin-top: 0 !important;
 }
 
+.chat-thread-inner {
+  box-sizing: border-box;
+  width: calc(100% - 36px);
+  max-width: var(--chat-thread-max-width);
+  margin-inline: auto;
+}
+
 /* New messages indicator - floating pill above compose */
 .chat-new-messages {
   align-self: center;