From c258fe86be5a7a49b232508910a9d264a237b964 Mon Sep 17 00:00:00 2001
From: jearhe <0verme7753@gmail.com>
Date: Sat, 5 Sep 2026 00:41:59 +0800
Subject: [PATCH] fix(docs): clear docs dialog close button overlap

---
 .../desktop/src/components/docs/DatabaseDocsDialog.vue |  2 +-
 .../docs/__tests__/DatabaseDocsDialogLayout.spec.ts    | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/components/docs/__tests__/DatabaseDocsDialogLayout.spec.ts

diff --git a/apps/desktop/src/components/docs/DatabaseDocsDialog.vue b/apps/desktop/src/components/docs/DatabaseDocsDialog.vue
index 136f20ce2c..8509210f16 100644
--- a/apps/desktop/src/components/docs/DatabaseDocsDialog.vue
+++ b/apps/desktop/src/components/docs/DatabaseDocsDialog.vue
@@ -207,7 +207,7 @@ watch(
 <template>
   <Dialog v-model:open="open">
     <DialogContent class="w-[94vw] max-w-[94vw] sm:max-w-[94vw] md:max-w-[94vw] lg:max-w-[94vw] xl:max-w-[94vw] h-[86vh] max-h-[86vh] gap-0 p-0 overflow-hidden flex flex-col">
-      <DialogHeader class="px-4 py-3 border-b">
+      <DialogHeader class="px-4 py-3 border-b pr-12">
         <DialogTitle class="flex items-center gap-2">
           <span>{{ t("docs.title") }}</span>
           <span v-if="statusLabel" class="text-xs font-normal" :class="status.state === 'failed' ? 'text-destructive' : 'text-muted-foreground'">
diff --git a/apps/desktop/src/components/docs/__tests__/DatabaseDocsDialogLayout.spec.ts b/apps/desktop/src/components/docs/__tests__/DatabaseDocsDialogLayout.spec.ts
new file mode 100644
index 0000000000..05e452f164
--- /dev/null
+++ b/apps/desktop/src/components/docs/__tests__/DatabaseDocsDialogLayout.spec.ts
@@ -0,0 +1,10 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../DatabaseDocsDialog.vue", import.meta.url), "utf8");
+
+describe("DatabaseDocsDialog layout", () => {
+  it("reserves header space for the absolute close button", () => {
+    expect(dialogSource).toMatch(/<DialogHeader class="[^"]*\bpr-12\b[^"]*">/);
+  });
+});