ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-12 21:53:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): stop chat welcome suggestion text overflowing chips on phones (#104579)

Browse Source 
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).
This commit is contained in:
Peter Steinberger
2026-07-11 10:24:11 -07:00
committed by GitHub
parent 702ba19e3a
commit fa0546b993
2 changed files with 24 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/styles/base.css
+5
View File
@@ -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 {
ui/src/styles/chat/layout.css
+19 -9
View File
@@ -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 */