feat(transfer): make data transfer dialog resizable

Closes #1149

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;
+    /* Override the legacy default cap without pinning width, so native resize remains effective. */
-    max-width: 1120px !important;
+    max-width: calc(100vw - 2rem) !important;
   }
 }
 </style>

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">');

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: calc(100vw - 2rem) !important;");
-    expect(dataTransferDialogSource).toContain("max-width: 1120px !important;");
+    expect(dataTransferDialogSource).not.toMatch(/^\s+width: calc\(100vw - 2rem\) !important;$/m);
     expect(globalsCss).not.toContain(".dbx-transfer-dialog");
   });