diff --git a/packages/app/src/settings/settings.css b/packages/app/src/settings/settings.css index 3f61e0ac2de2..9b3c9633410d 100644 --- a/packages/app/src/settings/settings.css +++ b/packages/app/src/settings/settings.css @@ -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; } diff --git a/packages/ui/src/components/image-preview.css b/packages/ui/src/components/image-preview.css index d69b4feca80a..6458b9c2dda8 100644 --- a/packages/ui/src/components/image-preview.css +++ b/packages/ui/src/components/image-preview.css @@ -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; } diff --git a/packages/ui/src/components/image-preview.tsx b/packages/ui/src/components/image-preview.tsx index 880ba6500548..42d1bd95b54c 100644 --- a/packages/ui/src/components/image-preview.tsx +++ b/packages/ui/src/components/image-preview.tsx @@ -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 },