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.
This commit is contained in:
Peter Steinberger 2026-09-26 20:34:19 -07:00 • committed by GitHub
parent 66dae510ea
commit 6700317c46
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 8 deletions

View file

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

View file

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