From 3ecfa6129aadd671b7a2fc6abd33ffd8abc87bd2 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 15 Jul 2026 16:42:18 +0800
Subject: [PATCH] fix(import): keep sql dialog actions visible

---
 .../sql-file/SqlFileExecutionDialog.vue       | 11 ++++---
 .../app-tests/sqlFileExecutionDialog.test.ts  | 31 +++++++++++++++++++
 2 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 packages/app-tests/sqlFileExecutionDialog.test.ts

diff --git a/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue b/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
index ab1bddd25..81cd08cc2 100644
--- a/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
+++ b/apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue
@@ -438,15 +438,16 @@ watch(
 
 <template>
   <Dialog :open="open" @update:open="handleOpenChange">
-    <DialogScrollContent class="sm:max-w-[860px] min-w-0 overflow-hidden" :trap-focus="false" @interact-outside.prevent>
-      <DialogHeader>
+    <DialogScrollContent class="flex max-h-[calc(100dvh-6rem)] min-h-0 min-w-0 flex-col overflow-hidden sm:max-w-[860px]" :trap-focus="false" @interact-outside.prevent>
+      <DialogHeader class="shrink-0">
         <DialogTitle class="flex items-center gap-2">
           <FileCode class="w-4 h-4" />
           {{ t("sqlFile.title") }}
         </DialogTitle>
       </DialogHeader>
 
-      <div class="grid min-w-0 gap-4 py-3">
+      <!-- Keep terminal actions reachable while long previews and errors scroll inside the viewport. -->
+      <div class="grid min-h-0 min-w-0 flex-1 gap-4 overflow-y-auto py-3">
         <div class="min-w-0 space-y-3">
           <div class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
             {{ t("sqlFile.file") }}
@@ -488,7 +489,7 @@ watch(
             {{ t("sqlFile.target") }}
           </div>
 
-          <div class="grid grid-cols-2 gap-3">
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div class="space-y-1.5">
               <Label class="text-xs">{{ t("sqlFile.connection") }}</Label>
               <Select v-model="connectionId" :disabled="running">
@@ -595,7 +596,7 @@ watch(
         </div>
       </div>
 
-      <DialogFooter>
+      <DialogFooter class="shrink-0">
         <template v-if="running">
           <Button variant="outline" size="sm" @click="open = false">
             {{ t("sqlFile.runInBackground") }}
diff --git a/packages/app-tests/sqlFileExecutionDialog.test.ts b/packages/app-tests/sqlFileExecutionDialog.test.ts
new file mode 100644
index 000000000..8ae4e6948
--- /dev/null
+++ b/packages/app-tests/sqlFileExecutionDialog.test.ts
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "vitest";
+import { compileScript, compileTemplate, parse } from "vue/compiler-sfc";
+
+const dialogPath = "apps/desktop/src/components/sql-file/SqlFileExecutionDialog.vue";
+const dialogSource = readFileSync(dialogPath, "utf8");
+
+test("SQL file execution dialog SFC compiles", () => {
+  const { descriptor, errors } = parse(dialogSource, { filename: dialogPath });
+  assert.deepEqual(errors, []);
+  assert.ok(descriptor.scriptSetup);
+  compileScript(descriptor, { id: dialogPath });
+  assert.ok(descriptor.template);
+  const result = compileTemplate({ id: dialogPath, filename: dialogPath, source: descriptor.template.content });
+  assert.deepEqual(result.errors, []);
+});
+
+test("SQL file execution dialog keeps actions visible within narrow viewports", () => {
+  assert.match(dialogSource, /DialogScrollContent class="[^"]*max-h-\[calc\(100dvh-6rem\)\][^"]*flex-col[^"]*overflow-hidden/);
+  assert.match(dialogSource, /<DialogHeader class="shrink-0">/);
+  assert.match(dialogSource, /class="grid min-h-0 min-w-0 flex-1 gap-4 overflow-y-auto py-3"/);
+  assert.match(dialogSource, /class="grid grid-cols-1 gap-3 sm:grid-cols-2"/);
+  assert.match(dialogSource, /<DialogFooter class="shrink-0">/);
+});
+
+test("SQL file execution dialog preserves cancel, close, and retry actions", () => {
+  assert.match(dialogSource, /<template v-if="running">[\s\S]*@click="open = false"[\s\S]*@click="cancelExecution"/);
+  assert.match(dialogSource, /<template v-else>[\s\S]*@click="open = false"[\s\S]*:disabled="!canStart" @click="startExecution"/);
+  assert.match(dialogSource, /terminalStatus\.value = cancelRequested\.value \? "cancelled" : "error"/);
+});