vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-11-15 09:35:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix(app): stop :has() rules restyling every ancestor on DOM insertion (#60521)

Browse source
This commit is contained in:
Luke Parker 2026-10-30 18:31:51 +10:00 • committed by GitHub
parent 1e03c36bb6
commit 92b2ca0dd7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

10
packages/app/src/settings/settings.css
View file

@ -846,16 +846,22 @@
justify-content: flex-end;
}
[data-slot="settings-row-control"] > div:has([data-component="switch"]),
/* The :has() belongs on the control, not on its div. Chromium checks a div:has() subject against every div in the
document and flags each one, then restyles a flagged div whenever an element is inserted anywhere beneath it, which
is every ancestor of a streaming answer. */
[data-slot="settings-row-control"]:has(> div [data-component="switch"]) > div,
[data-slot="settings-row-control"] > [data-component="switch"] {
display: inline-flex;
align-items: center;
padding: 4px;
}
[data-component="settings-list"][data-variant="catalog"]
[data-slot="settings-row-control"]:has(> div [data-component="switch"])
> div,
[data-component="settings-list"][data-variant="catalog"]
[data-slot="settings-row-control"]
> :is(div:has([data-component="switch"]), [data-component="switch"]) {
> [data-component="switch"] {
padding: 0;
}

5
packages/ui/src/components/image-preview.css
View file

@ -182,8 +182,9 @@
}
/* A modal Kobalte dialog turns the body's pointer events off and only restores them when its content unmounts, which
the closing flight above holds back; the page takes clicks again as soon as the close starts. */
body:has([data-component="image-preview"] [data-slot="image-preview-content"][data-closed]) {
the closing flight above holds back; the page takes clicks again as soon as the close starts. The preview marks the
body itself: a body:has() rule made Chromium restyle the body on every DOM insertion anywhere in the page. */
body[data-image-preview-closing] {
pointer-events: auto !important;
}

4
packages/ui/src/components/image-preview.tsx
View file

@ -405,12 +405,16 @@ export function ImagePreview(props: ImagePreviewProps) {
settle()
showOrigin()
giveBack()
document.body.removeAttribute("data-image-preview-closing")
})
createEffect(
on(
() => dialog.isOpen(),
(open) => {
// See image-preview.css: the body takes clicks again while the closing flight holds the dialog mounted.
document.body.toggleAttribute("data-image-preview-closing", !open)
if (!open) dismiss()
},
{ defer: true },