From 334c4be73e1b69083996f59d805bc159864a1dfd Mon Sep 17 00:00:00 2001
From: Xi Qi <realxqi@gmail.com>
Date: Sun, 5 Apr 2026 06:05:48 +0800
Subject: [PATCH] style(UI): improve mobile chat layout (#60220)

* UI: improve mobile chat layout

* change .chat-group-messages min-width: from 604 to 602

* UI: fix chat-group-messages overflow in split-view and mobile layouts

* UI: revert chat.css import order in styles.css and components.css

* UI: simplify mobile chat layout overrides in grouped.css

* ui: move .chat and .chat-thread styles to chat/layout.css

* fix: document mobile chat layout improvements

* fix: improve narrow mobile chat width

---------

Co-authored-by: Altay <altay@uinaf.dev>
---
 CHANGELOG.md                   |  1 +
 ui/src/styles/chat/grouped.css | 28 ++++++++++++++++++++++------
 ui/src/styles/chat/layout.css  | 19 ++++++++++++++++---
 ui/src/styles/chat/sidebar.css |  2 +-
 ui/src/styles/components.css   | 22 ----------------------
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bfdb328141f..38492e7e52e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -209,6 +209,7 @@ Docs: https://docs.openclaw.ai
 - Browser/profiles: reject remote browser profile `cdpUrl` values that violate strict SSRF policy before saving config, with clearer validation errors for blocked endpoints. (#60477) Thanks @eleqtrizit.
 - Browser/screenshots: stop sending `fromSurface: false` on CDP screenshots so managed Chrome 146+ browsers can capture images again. (#60682) Thanks @mvanhorn.
 - Mattermost/slash commands: harden native slash-command callback token validation to use constant-time secret comparison, matching the existing interaction-token path.
+- Control UI/mobile chat: reduce narrow-screen overflow by shrinking the chat pane minimum width, removing extra mobile padding, widening message groups, and hiding avatars on very small screens. (#60220) Thanks @macdao.
 
 ## 2026.4.1
 
diff --git a/ui/src/styles/chat/grouped.css b/ui/src/styles/chat/grouped.css
index e82e78f590a..9f72a0c5077 100644
--- a/ui/src/styles/chat/grouped.css
+++ b/ui/src/styles/chat/grouped.css
@@ -32,12 +32,6 @@
   align-items: flex-end;
 }
 
-@media (max-width: 600px) {
-  .chat-group-messages {
-    max-width: 82%;
-  }
-}
-
 .chat-group.user .chat-group-footer {
   justify-content: flex-end;
 }
@@ -484,3 +478,25 @@ img.chat-avatar {
 .chat-delete-confirm__yes:hover {
   background: #dc2626;
 }
+
+@media (max-width: 768px) {
+  .chat-group {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .chat-group-messages {
+    max-width: 82%;
+  }
+}
+
+@media (max-width: 400px) {
+  .chat-group-messages {
+    max-width: 100%;
+  }
+
+  .chat-avatar,
+  img.chat-avatar {
+    display: none;
+  }
+}
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 9455ee13495..3f0ca035d9b 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -51,16 +51,21 @@
 
 /* Chat thread - scrollable middle section, transparent */
 .chat-thread {
-  flex: 1 1 0;
+  flex: 1;
   /* Grow, shrink, and use 0 base for proper scrolling */
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0 6px 6px;
+  padding: 0 12px 16px;
   margin: 0 0 0 0;
   min-height: 0;
   /* Allow shrinking for flex scroll behavior */
-  border-radius: var(--radius-md);
+  border-radius: 0;
+  border: none;
   background: transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
 }
 
 .chat-thread-inner > :first-child {
@@ -839,6 +844,14 @@
   .chat-compose__field textarea {
     min-height: 64px;
   }
+
+  .card.chat {
+    padding: 0;
+  }
+
+  .chat-thread {
+    padding: 0 0 16px;
+  }
 }
 
 @media (max-width: 640px) {
diff --git a/ui/src/styles/chat/sidebar.css b/ui/src/styles/chat/sidebar.css
index 79ea1e47690..27c6765308f 100644
--- a/ui/src/styles/chat/sidebar.css
+++ b/ui/src/styles/chat/sidebar.css
@@ -8,7 +8,7 @@
 }
 
 .chat-main {
-  min-width: 400px;
+  min-width: 312px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index daf68a9eac1..476066f97d5 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -2380,12 +2380,6 @@ td.data-table-key-col {
    Chat
    =========================================== */
 
-.chat {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 .shell--chat .chat {
   flex: 1;
 }
@@ -2416,22 +2410,6 @@ td.data-table-key-col {
   min-width: 240px;
 }
 
-.chat-thread {
-  margin-top: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0 12px 16px;
-  min-width: 0;
-  border-radius: 0;
-  border: none;
-  background: transparent;
-}
-
 /* Chat queue */
 .chat-queue {
   margin-top: 12px;