From a6edbd7fcb5f068bfc1f13028934d585d5dfd987 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 24 Aug 2026 23:44:37 +0000
Subject: [PATCH] feat(transfer): make data transfer dialog resizable

Closes #1149
---
 .../transfer/DataTransferDialog.vue           | 15 ++++++++++++---
 .../__tests__/DataTransferDialog.spec.ts      | 19 +++++++++++++++++++
 .../__tests__/legacyWebviewFallback.spec.ts   |  7 ++++---
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/apps/desktop/src/components/transfer/DataTransferDialog.vue b/apps/desktop/src/components/transfer/DataTransferDialog.vue
index 4f8cdd346e..5de010843f 100644
--- a/apps/desktop/src/components/transfer/DataTransferDialog.vue
+++ b/apps/desktop/src/components/transfer/DataTransferDialog.vue
@@ -46,6 +46,15 @@ const props = defineProps<{
   prefillTargetSchema?: string;
 }>();
 
+const transferDialogStyle = {
+  width: "min(1120px, calc(100vw - 2rem))",
+  height: "min(80vh, calc(var(--dbx-viewport-height) - 2rem))",
+  minWidth: "min(780px, calc(100vw - 2rem))",
+  minHeight: "min(480px, calc(var(--dbx-viewport-height) - 2rem))",
+  maxWidth: "calc(100vw - 2rem)",
+  maxHeight: "calc(var(--dbx-viewport-height) - 2rem)",
+} as const;
+
 const store = useConnectionStore();
 
 const sqlConnections = computed(() => store.connections.filter((c) => supportsTransfer(c.db_type)));
@@ -919,7 +928,7 @@ async function saveConfigTask() {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent class="dbx-transfer-dialog sm:max-w-[1120px] max-h-[80vh] flex flex-col overflow-hidden" @interact-outside.prevent>
+    <DialogContent class="dbx-transfer-dialog sm:max-w-[1120px] max-h-[80vh] flex flex-col overflow-hidden resize" :style="transferDialogStyle" @interact-outside.prevent>
       <DialogHeader class="shrink-0">
         <DialogTitle class="flex items-center gap-2">
           <ArrowRightLeft class="w-4 h-4" />
@@ -1234,8 +1243,8 @@ async function saveConfigTask() {
 <style>
 @media (min-width: 640px) {
   html.dbx-legacy-webview [data-slot="dialog-content"].dbx-transfer-dialog[class~="max-w-sm"] {
-    width: calc(100vw - 2rem) !important;
-    max-width: 1120px !important;
+    /* Override the legacy default cap without pinning width, so native resize remains effective. */
+    max-width: calc(100vw - 2rem) !important;
   }
 }
 </style>
diff --git a/apps/desktop/src/components/transfer/__tests__/DataTransferDialog.spec.ts b/apps/desktop/src/components/transfer/__tests__/DataTransferDialog.spec.ts
index a79ddba4b5..37227e2bb2 100644
--- a/apps/desktop/src/components/transfer/__tests__/DataTransferDialog.spec.ts
+++ b/apps/desktop/src/components/transfer/__tests__/DataTransferDialog.spec.ts
@@ -4,6 +4,25 @@ import { describe, expect, it } from "vitest";
 const dialogSource = readFileSync(new URL("../DataTransferDialog.vue", import.meta.url), "utf8");
 
 describe("DataTransferDialog layout", () => {
+  it("keeps only the main dialog resizable within safe viewport bounds", () => {
+    const dialogContentTags = dialogSource.match(/<DialogContent\b[^>]*>/g) ?? [];
+    const resizableDialogs = dialogContentTags.filter((tag) => tag.includes(" resize"));
+
+    expect(resizableDialogs).toHaveLength(1);
+    expect(resizableDialogs[0]).toContain('class="dbx-transfer-dialog sm:max-w-[1120px] max-h-[80vh] flex flex-col overflow-hidden resize"');
+    expect(resizableDialogs[0]).toContain(':style="transferDialogStyle"');
+    expect(dialogSource).toContain('width: "min(1120px, calc(100vw - 2rem))"');
+    expect(dialogSource).toContain('height: "min(80vh, calc(var(--dbx-viewport-height) - 2rem))"');
+    expect(dialogSource).toContain('minWidth: "min(780px, calc(100vw - 2rem))"');
+    expect(dialogSource).toContain('minHeight: "min(480px, calc(var(--dbx-viewport-height) - 2rem))"');
+    expect(dialogSource).toContain('maxWidth: "calc(100vw - 2rem)"');
+    expect(dialogSource).toContain('maxHeight: "calc(var(--dbx-viewport-height) - 2rem)"');
+  });
+
+  it("keeps source and target side by side while the dialog changes size", () => {
+    expect(dialogSource).toContain('class="grid grid-cols-[1fr_auto_1fr] gap-4 items-start"');
+  });
+
   it("keeps the header and footer outside the shrinking content region", () => {
     expect(dialogSource).toContain('<DialogHeader class="shrink-0">');
     expect(dialogSource).toContain('<DialogFooter class="shrink-0">');
diff --git a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
index 06a3d5ffb9..eb123e7a8a 100644
--- a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
+++ b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
@@ -81,10 +81,11 @@ describe("legacy WebView CSS fallbacks", () => {
   });
 
   it("keeps the data transfer dialog width fallback scoped to legacy WebViews", () => {
-    expect(dataTransferDialogSource).toContain('class="dbx-transfer-dialog sm:max-w-[1120px] max-h-[80vh] flex flex-col overflow-hidden"');
+    expect(dataTransferDialogSource).toContain('class="dbx-transfer-dialog sm:max-w-[1120px] max-h-[80vh] flex flex-col overflow-hidden resize"');
+    expect(dataTransferDialogSource).toContain('width: "min(1120px, calc(100vw - 2rem))"');
     expect(dataTransferDialogSource).toContain('html.dbx-legacy-webview [data-slot="dialog-content"].dbx-transfer-dialog[class~="max-w-sm"]');
-    expect(dataTransferDialogSource).toContain("width: calc(100vw - 2rem) !important;");
-    expect(dataTransferDialogSource).toContain("max-width: 1120px !important;");
+    expect(dataTransferDialogSource).toContain("max-width: calc(100vw - 2rem) !important;");
+    expect(dataTransferDialogSource).not.toMatch(/^\s+width: calc\(100vw - 2rem\) !important;$/m);
     expect(globalsCss).not.toContain(".dbx-transfer-dialog");
   });