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

@@ -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
 

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;
+  }
+}

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) {

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;

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;