From a0e38b3da9fd017fead5a87491c0a060ec8e01ae Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Sun, 19 Jul 2026 11:47:06 +0800
Subject: [PATCH] fix(search): keep database search dialog in viewport

---
 .../search/DatabaseSearchDialog.vue           |  9 ++++----
 .../__tests__/DatabaseSearchDialog.spec.ts    | 21 +++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 apps/desktop/src/components/search/__tests__/DatabaseSearchDialog.spec.ts

diff --git a/apps/desktop/src/components/search/DatabaseSearchDialog.vue b/apps/desktop/src/components/search/DatabaseSearchDialog.vue
index 2ec22b3b1c..af28c992cc 100644
--- a/apps/desktop/src/components/search/DatabaseSearchDialog.vue
+++ b/apps/desktop/src/components/search/DatabaseSearchDialog.vue
@@ -268,8 +268,8 @@ function openResult(item: SearchResultItem) {
 
 <template>
   <Dialog v-model:open="dialogOpen">
-    <DialogScrollContent class="max-w-4xl gap-0 p-0">
-      <DialogHeader class="border-b px-5 py-4">
+    <DialogScrollContent class="flex max-h-[calc(100dvh-6rem)] min-h-0 max-w-4xl flex-col overflow-hidden gap-0 p-0">
+      <DialogHeader class="shrink-0 border-b px-5 py-4">
         <DialogTitle class="flex items-center gap-2">
           <Search class="h-5 w-5" />
           {{ t("databaseSearch.title") }}
@@ -280,7 +280,8 @@ function openResult(item: SearchResultItem) {
         </div>
       </DialogHeader>
 
-      <div class="space-y-4 px-5 py-4">
+      <!-- Keep the actions reachable while the search form and results share the available viewport. -->
+      <div class="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4">
         <div class="grid gap-3 md:grid-cols-[1fr_9rem_auto]">
           <div class="space-y-1.5">
             <Label class="text-xs">{{ t("databaseSearch.keyword") }}</Label>
@@ -354,7 +355,7 @@ function openResult(item: SearchResultItem) {
         </div>
       </div>
 
-      <DialogFooter class="border-t px-5 py-3">
+      <DialogFooter class="shrink-0 border-t px-5 py-3">
         <Button variant="outline" @click="dialogOpen = false">{{ t("common.close") }}</Button>
       </DialogFooter>
     </DialogScrollContent>
diff --git a/apps/desktop/src/components/search/__tests__/DatabaseSearchDialog.spec.ts b/apps/desktop/src/components/search/__tests__/DatabaseSearchDialog.spec.ts
new file mode 100644
index 0000000000..b9346bfc74
--- /dev/null
+++ b/apps/desktop/src/components/search/__tests__/DatabaseSearchDialog.spec.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../DatabaseSearchDialog.vue", import.meta.url), "utf8");
+
+describe("DatabaseSearchDialog layout", () => {
+  it("keeps the header and footer visible within the dynamic viewport", () => {
+    expect(dialogSource).toContain('class="flex max-h-[calc(100dvh-6rem)] min-h-0 max-w-4xl flex-col overflow-hidden gap-0 p-0"');
+    expect(dialogSource).toContain('<DialogHeader class="shrink-0 border-b px-5 py-4">');
+    expect(dialogSource).toContain('<DialogFooter class="shrink-0 border-t px-5 py-3">');
+  });
+
+  it("scrolls the middle region without removing result-list scrolling", () => {
+    expect(dialogSource).toContain('class="min-h-0 flex-1 space-y-4 overflow-y-auto px-5 py-4"');
+    expect(dialogSource).toContain('class="max-h-[360px] space-y-2 overflow-auto pr-1"');
+  });
+
+  it("preserves the footer close action", () => {
+    expect(dialogSource).toContain('@click="dialogOpen = false"');
+  });
+});