From fa0546b9930e801c2e6d731f4570ce95b3f5c16a Mon Sep 17 00:00:00 2001
From: Peter Steinberger <peter@steipete.me>
Date: Sat, 11 Jul 2026 10:24:11 -0700
Subject: [PATCH] fix(ui): stop chat welcome suggestion text overflowing chips
 on phones (#104579)

The mobile single-column override for the welcome suggestion grid sat before
the base two-column rules with equal specificity, so it never applied; iPhone
WebKit views also inflate text via font boosting because text-size-adjust was
never locked, letting labels paint outside the chips. Move the override after
the base rules, lock text-size-adjust at the root, and harden chip wrapping
(line-height, balance, break-word).
---
 ui/src/styles/base.css        |  5 +++++
 ui/src/styles/chat/layout.css | 28 +++++++++++++++++++---------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css
index 7fc61481417d..be40f3179c9a 100644
--- a/ui/src/styles/base.css
+++ b/ui/src/styles/base.css
@@ -503,6 +503,11 @@ body {
      macOS WKWebView (Mac app) and Safari rubber-band the whole window, even
      when nothing overflows. */
   overscroll-behavior: none;
+  /* iOS WKWebView font boosting inflates rendered text without re-running
+     layout, so labels spill out of fixed-size chrome (welcome chips, badges).
+     Locking text-size-adjust keeps rendered metrics equal to layout metrics. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 body {
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 008f19d9f15c..09c8361c618f 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -4082,14 +4082,6 @@ openclaw-chat-pane:has(> .chat-pane__header) .chat-thread {
   .agent-chat__composer-controls .chat-controls__model {
     min-width: 0;
   }
-
-  .agent-chat__suggestions {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .agent-chat__suggestion {
-    min-height: 44px;
-  }
 }
 
 @media (display-mode: standalone) and (max-width: 768px) {
@@ -4280,11 +4272,16 @@ openclaw-chat-pane:has(> .chat-pane__header) .chat-thread {
 .agent-chat__suggestion {
   min-height: 40px;
   font-size: 13px;
-  padding: 8px 16px;
+  line-height: 1.4;
+  padding: 10px 16px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   background: var(--panel);
   color: var(--foreground);
+  /* Localized labels wrap to multiple lines; balance keeps the split even and
+     break-word stops long words from pushing past the chip border. */
+  text-wrap: balance;
+  overflow-wrap: break-word;
   transition:
     background 0.15s,
     border-color 0.15s;
@@ -4295,5 +4292,18 @@ openclaw-chat-pane:has(> .chat-pane__header) .chat-thread {
   border-color: var(--accent);
 }
 
+/* Must stay after the base suggestion rules: equal specificity, so source
+   order is what lets the phone layout win over the two-column default. */
+@media (max-width: 768px) {
+  .agent-chat__suggestions {
+    grid-template-columns: minmax(0, 1fr);
+    width: min(100%, 360px);
+  }
+
+  .agent-chat__suggestion {
+    min-height: 44px;
+  }
+}
+
 /* Mobile dropdown toggle — hidden on desktop */
 /* Mobile gear toggle + dropdown are hidden by default in layout.css */