fix(ui): support legacy WebView dialog viewports

apps/desktop/src/components/diff/SchemaDiffDialog.vue

@@ -106,10 +106,10 @@ const isMaximized = ref(false);
 const dialogStyle = computed(() => {
   if (isMaximized.value) {
     return {
-      width: "100vw",
-      height: "100vh",
-      maxWidth: "100vw",
-      maxHeight: "100vh",
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      maxHeight: "100%",
       borderRadius: "0",
     };
   }
@@ -133,6 +133,13 @@ function toggleMaximize() {
   isMaximized.value = !isMaximized.value;
 }
 
+function handleDialogEscape(event: KeyboardEvent) {
+  if (!showOptionsPanel.value) return;
+
+  event.preventDefault();
+  showOptionsPanel.value = false;
+}
+
 let resizeObserver: ResizeObserver | null = null;
 let saveTimeout: number | null = null;
 
@@ -679,7 +686,7 @@ const targetConnectionInfo = computed(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent :class="['min-w-[800px] flex flex-col overflow-hidden', isMaximized ? '' : 'resize']" :style="dialogStyle" @interact-outside.prevent>
+    <DialogContent :class="['flex flex-col overflow-hidden', isMaximized ? 'min-w-0' : 'min-w-[800px] resize']" :portal-class="isMaximized ? 'p-0' : undefined" :style="dialogStyle" @interact-outside.prevent @escape-key-down="handleDialogEscape">
       <Button variant="ghost" size="icon-sm" class="absolute top-2 right-10 z-10" @click="toggleMaximize">
         <Maximize2 v-if="!isMaximized" class="w-4 h-4" />
         <Minimize2 v-else class="w-4 h-4" />

apps/desktop/src/components/diff/__tests__/SchemaDiffDialog.spec.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const dialogSource = readFileSync(new URL("../SchemaDiffDialog.vue", import.meta.url), "utf8");
+
+describe("SchemaDiffDialog fullscreen layout", () => {
+  it("fits the dialog to its portal instead of the viewport width", () => {
+    expect(dialogSource).toContain('width: "100%"');
+    expect(dialogSource).toContain('height: "100%"');
+    expect(dialogSource).not.toContain('width: "100vw"');
+    expect(dialogSource).not.toContain('height: "100vh"');
+  });
+
+  it("removes the normal dialog gutter and minimum width while maximized", () => {
+    expect(dialogSource).toContain(":portal-class=\"isMaximized ? 'p-0' : undefined\"");
+    expect(dialogSource).toContain("isMaximized ? 'min-w-0' : 'min-w-[800px] resize'");
+  });
+
+  it("closes the options panel before allowing Escape to dismiss the dialog", () => {
+    expect(dialogSource).toContain('@escape-key-down="handleDialogEscape"');
+    expect(dialogSource).toContain("if (!showOptionsPanel.value) return;");
+    expect(dialogSource).toContain("event.preventDefault();");
+    expect(dialogSource).toContain("showOptionsPanel.value = false;");
+  });
+});