From 927f2f10d5ebe93e7a9077d5df63579edb54dfbf Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Mon, 21 Sep 2026 16:33:12 +0800
Subject: [PATCH] fix(dialog): use opaque surface for scrollable dialogs

---
 .../ui/dialog/DialogScrollContent.vue         |  2 +-
 .../__tests__/dialogSurfaceOpacity.spec.ts    | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/components/ui/dialog/__tests__/dialogSurfaceOpacity.spec.ts

diff --git a/apps/desktop/src/components/ui/dialog/DialogScrollContent.vue b/apps/desktop/src/components/ui/dialog/DialogScrollContent.vue
index 42e0f42a8d..4ea4e77312 100644
--- a/apps/desktop/src/components/ui/dialog/DialogScrollContent.vue
+++ b/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) => {
diff --git a/apps/desktop/src/components/ui/dialog/__tests__/dialogSurfaceOpacity.spec.ts b/apps/desktop/src/components/ui/dialog/__tests__/dialogSurfaceOpacity.spec.ts
new file mode 100644
index 0000000000..599d5df868
--- /dev/null
+++ b/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/);
+  });
+});