From 6700317c46c6cc59bdcc14bf200dc02491c1d72d Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Sat, 26 Sep 2026 20:34:19 -0700
Subject: [PATCH] perf(ui): stop two :has() rules from restyling the whole page
 on every chat update (#159293)

The composer placeholder rule and the plugin-embed spacing rule each made
Chromium restyle the entire document whenever a node was inserted anywhere
under the chat content, so every transcript commit paid full-page style
recalcs through forced layout reads.

Both are replaced with equivalent selectors: all composers always render the
overlay placeholder, and the embed reset now names the concrete content
children instead of a universal subject.
---
 ui/src/styles/chat/composer-surface.css | 11 ++++-------
 ui/src/styles/layout.css                | 12 +++++++++++-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/ui/src/styles/chat/composer-surface.css b/ui/src/styles/chat/composer-surface.css
index a80972115793..3c55b8f321a1 100644
--- a/ui/src/styles/chat/composer-surface.css
+++ b/ui/src/styles/chat/composer-surface.css
@@ -376,14 +376,11 @@
   box-shadow: none;
 }
 
+/* Chromium forces native placeholders to clip while focused. Every composer
+   renders a noneditable sibling that keeps the ellipsis while the native
+   placeholder supplies semantics. A :has() probe for that sibling made each
+   transcript insertion restyle the whole document. */
 .agent-chat__composer-combobox > :is(textarea, input)::placeholder {
-  color: var(--muted);
-}
-
-/* Chromium forces native placeholders to clip while focused. A noneditable
-   sibling keeps the ellipsis while the native placeholder supplies semantics. */
-.agent-chat__composer-combobox:has(> .agent-chat__composer-placeholder)
-  > :is(textarea, input)::placeholder {
   color: transparent;
 }
 
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
index cba288c80444..382fca1fe728 100644
--- a/ui/src/styles/layout.css
+++ b/ui/src/styles/layout.css
@@ -4576,7 +4576,17 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
   gap: 0;
 }
 
-.content:has(.plugin-tab-embed) > * + * {
+/* Name the children: a universal subject under this :has() restyles the whole
+   document on every insertion inside .content, including each chat row. */
+.content:has(.plugin-tab-embed)
+  > :is(
+    .connection-action-block,
+    openclaw-sidebar-attention,
+    openclaw-sidebar-update-card,
+    .native-embed-header,
+    .settings-embed-list,
+    openclaw-router-outlet
+  ) {
   margin-top: 0;
 }