fix(dialog): use opaque surface for scrollable dialogs

apps/desktop/src/components/ui/dialog/DialogScrollContent.vue

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <div data-slot="dialog-positioner" class="fixed inset-0 z-50 grid place-items-center p-4 pointer-events-none">
       <DialogContent
         data-slot="dialog-content"
-        :class="cn('relative z-50 grid max-h-[calc(var(--dbx-viewport-height)-6rem)] w-full max-w-lg my-8 gap-4 rounded-lg border border-border bg-background p-4 shadow-lg duration-200 md:w-full pointer-events-auto', props.class)"
+        :class="cn('relative z-50 grid max-h-[calc(var(--dbx-viewport-height)-6rem)] w-full max-w-lg my-8 gap-4 rounded-lg border border-border bg-popover text-popover-foreground p-4 shadow-lg duration-200 md:w-full pointer-events-auto', props.class)"
         v-bind="{ ...$attrs, ...forwarded }"
         @pointer-down-outside="
           (event) => {

apps/desktop/src/components/ui/dialog/__tests__/dialogSurfaceOpacity.spec.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const DIALOG_SHELLS = ["DialogContent.vue", "DialogScrollContent.vue"] as const;
+
+function dialogShellSource(file: string): string {
+  return readFileSync(new URL(`../${file}`, import.meta.url), "utf8");
+}
+
+describe("dialog shell surfaces", () => {
+  // While a wallpaper is active --background (and the other root surfaces) are
+  // tinted with alpha, so a dialog painted with bg-background lets the image
+  // bleed through its body. Card/popover surfaces stay opaque on purpose.
+  it.each(DIALOG_SHELLS)("%s paints its surface with an opaque token", (file) => {
+    const source = dialogShellSource(file);
+
+    expect(source).toContain('data-slot="dialog-content"');
+    expect(source).toMatch(/\bbg-(popover|card)\b/);
+    expect(source).not.toMatch(/\bbg-background\b/);
+  });
+});