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

Author: Hona

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

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

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 },