From f4971d509ad9a131babddc132d6f5d6e8dc6c7a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=A5=E9=A3=9F=E5=88=86=E5=AD=90?=
 <54768887+wzlstudy@users.noreply.github.com>
Date: Sun, 30 Aug 2026 01:33:59 +0800
Subject: [PATCH] fix(desktop): restore legacy webview dialog and highlight
 fixes

---
 .../codeSnapshot/CodeSnapshotDialog.vue       |  22 +-
 .../components/config/TagManagementPanel.vue  |   9 +-
 .../diagram/SchemaDiagramDialog.vue           |   2 +-
 .../editor/MultiDbExecuteDialog.vue           |  15 +-
 .../__tests__/MultiDbExecuteDialog.spec.ts    |  23 +
 .../components/grid/DataGridColumnHeader.vue  |   2 +-
 .../grid/__tests__/DataGridSurfaces.spec.ts   |  27 +
 .../src/components/layout/UpdateDialog.vue    |  13 +-
 .../src/components/objects/DdlViewDialog.vue  |   9 -
 .../DdlDialog.legacyScope.fixture.vue         |  25 +
 .../__tests__/DdlDialog.legacyScope.spec.ts   |  74 +++
 .../ai/__tests__/aiCodeHighlighter.spec.ts    |  17 +
 apps/desktop/src/lib/ai/aiCodeHighlighter.ts  |  11 +-
 .../__tests__/codeSnapshot.spec.ts            |  54 ++
 .../src/lib/codeSnapshot/codeSnapshot.ts      |  87 +++
 .../lib/ui/__tests__/legacyWebView.spec.ts    |  25 +-
 apps/desktop/src/lib/ui/legacyWebView.ts      |  15 +
 .../__tests__/legacyWebviewFallback.spec.ts   | 100 ++-
 apps/desktop/src/styles/globals.css           | 612 ++++++++++--------
 19 files changed, 810 insertions(+), 332 deletions(-)
 create mode 100644 apps/desktop/src/components/editor/__tests__/MultiDbExecuteDialog.spec.ts
 create mode 100644 apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.fixture.vue
 create mode 100644 apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.spec.ts

diff --git a/apps/desktop/src/components/codeSnapshot/CodeSnapshotDialog.vue b/apps/desktop/src/components/codeSnapshot/CodeSnapshotDialog.vue
index 2cd9e56946..508e063349 100644
--- a/apps/desktop/src/components/codeSnapshot/CodeSnapshotDialog.vue
+++ b/apps/desktop/src/components/codeSnapshot/CodeSnapshotDialog.vue
@@ -158,7 +158,7 @@ const previewVisible = computed(() => open.value && !!props.source);
   <Dialog v-model:open="open">
     <!-- 对话框整体限高：高度上限跟随 --dbx-viewport-height（兼容旧版 WebView 中 vh 不准的情况）；
          内部采用纵向 flex 布局，header/footer 固定，只有中间预览区滚动，保证底部按钮始终可见 -->
-    <DialogContent class="dbx-code-snapshot-dialog flex max-h-[calc(var(--dbx-viewport-height)-2rem)] flex-col overflow-hidden border border-border !bg-background text-foreground shadow-2xl !backdrop-blur-none sm:max-w-[860px]">
+    <DialogContent class="flex max-h-[calc(var(--dbx-viewport-height)-2rem)] flex-col overflow-hidden border border-border !bg-background text-foreground shadow-2xl !backdrop-blur-none sm:max-w-[860px]">
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <Camera class="h-5 w-5 text-primary" />
@@ -209,7 +209,7 @@ const previewVisible = computed(() => open.value && !!props.source);
         </div>
       </div>
 
-      <DialogFooter class="dbx-code-snapshot-dialog__footer">
+      <DialogFooter>
         <Button variant="outline" @click="open = false">{{ t("codeSnapshot.close") }}</Button>
         <Button variant="outline" :disabled="exporting" @click="exportSnapshot('clipboard')">
           <Check v-if="copied" class="mr-1.5 h-4 w-4 text-green-500" />
@@ -224,21 +224,3 @@ const previewVisible = computed(() => open.value && !!props.source);
     </DialogContent>
   </Dialog>
 </template>
-
-<style>
-html.dbx-legacy-webview [data-slot="dialog-content"].dbx-code-snapshot-dialog {
-  display: flex !important;
-  flex-direction: column !important;
-  width: calc(100vw - 2rem) !important;
-  max-width: 860px !important;
-  min-width: 0 !important;
-}
-
-html.dbx-legacy-webview .dbx-code-snapshot-dialog__footer {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-  flex-wrap: nowrap !important;
-}
-</style>
diff --git a/apps/desktop/src/components/config/TagManagementPanel.vue b/apps/desktop/src/components/config/TagManagementPanel.vue
index 8fdec7d2bf..22b9242112 100644
--- a/apps/desktop/src/components/config/TagManagementPanel.vue
+++ b/apps/desktop/src/components/config/TagManagementPanel.vue
@@ -55,6 +55,9 @@ const importPreview = ref<BusinessTag[]>([]);
 const whitelistInput = ref("");
 
 const environments = ["", "development", "staging", "production"];
+// reka-ui Select throws on SelectItem value="" (and the leftover dismissable
+// layer then blocks all clicks), so "all environments" uses a sentinel value.
+const ALL_ENVIRONMENTS = "__all__";
 
 const filteredTags = computed(() => {
   return props.tags.filter((tag) => {
@@ -174,12 +177,14 @@ function handleExport() {
         <Input v-model="filter.search" :placeholder="t('common.search')" />
       </div>
       <div class="filter-controls">
-        <Select v-model="filter.environment">
+        <!-- reka-ui throws on SelectItem value="" and the leftover dismissable
+             layer then blocks every click, so the "all" entry uses a sentinel. -->
+        <Select :model-value="filter.environment || ALL_ENVIRONMENTS" @update:model-value="(value: any) => (filter.environment = value === ALL_ENVIRONMENTS ? '' : String(value))">
           <SelectTrigger class="w-[160px]">
             <SelectValue :placeholder="t('tag.environment')" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="">
+            <SelectItem :value="ALL_ENVIRONMENTS">
               {{ t("common.all") }}
             </SelectItem>
             <SelectItem v-for="env in environments.filter(Boolean)" :key="env" :value="env">
diff --git a/apps/desktop/src/components/diagram/SchemaDiagramDialog.vue b/apps/desktop/src/components/diagram/SchemaDiagramDialog.vue
index 6e6e26adc6..4f01494e91 100644
--- a/apps/desktop/src/components/diagram/SchemaDiagramDialog.vue
+++ b/apps/desktop/src/components/diagram/SchemaDiagramDialog.vue
@@ -1859,7 +1859,7 @@ onUnmounted(() => {
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent class="gap-0 p-0 overflow-hidden flex flex-col min-w-0" :class="isFullscreen ? '' : 'sm:max-w-[94vw] md:max-w-[94vw] lg:max-w-[94vw] xl:max-w-[94vw]'" :style="dialogStyle" :portal-class="isFullscreen ? 'p-0' : undefined">
+    <DialogContent class="gap-0 p-0 overflow-hidden flex flex-col min-w-0" :class="isFullscreen ? 'dbx-diagram-fullscreen' : 'sm:max-w-[94vw] md:max-w-[94vw] lg:max-w-[94vw] xl:max-w-[94vw]'" :style="dialogStyle" :portal-class="isFullscreen ? 'p-0' : undefined">
       <DialogHeader class="px-4 py-3 border-b">
         <DialogTitle class="flex items-center gap-2">
           <Network class="w-4 h-4" />
diff --git a/apps/desktop/src/components/editor/MultiDbExecuteDialog.vue b/apps/desktop/src/components/editor/MultiDbExecuteDialog.vue
index e054721dd2..7e53faf5ee 100644
--- a/apps/desktop/src/components/editor/MultiDbExecuteDialog.vue
+++ b/apps/desktop/src/components/editor/MultiDbExecuteDialog.vue
@@ -4,6 +4,7 @@ import { useI18n } from "vue-i18n";
 import { AlertTriangle, Check, CheckSquare, ChevronDown, ChevronRight, FolderOpen, Layers, Loader2, MinusSquare, Pencil, Play, RefreshCw, Search, Settings2, Square, Trash2, X } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { ScrollArea } from "@/components/ui/scroll-area";
@@ -43,6 +44,9 @@ const selectedTargets = ref<MultiDbExecutionTarget[]>([]);
 const validationResults = ref<SqlExecutionTargetValidation[]>([]);
 const searchText = ref("");
 const selectedGroupId = ref<string>();
+// reka-ui Select throws on SelectItem value="" — the "no group" entry uses this
+// sentinel and the change handler maps it back to "".
+const NO_GROUP_VALUE = "__none__";
 const manageGroups = ref(false);
 const expandedConnections = ref<Set<string>>(new Set());
 const expandedCatalogs = ref<Set<string>>(new Set());
@@ -808,10 +812,13 @@ watch(
               <span>{{ t("multiDbExecute.selectGroup") }}</span>
               <Button variant="ghost" size="sm" class="h-6 px-1.5 text-xs" @click="manageGroups = true"><Settings2 class="mr-1 h-3.5 w-3.5" />{{ t("multiDbExecute.manageGroups") }}</Button>
             </div>
-            <select class="h-8 w-full rounded-md border border-input bg-background px-2 text-sm" :value="selectedGroupId || ''" :disabled="isExecuting" @change="requestGroupSelection(($event.target as HTMLSelectElement).value)">
-              <option value="">{{ t("multiDbExecute.noGroupSelected") }}</option>
-              <option v-for="group in compatibleGroups" :key="group.id" :value="group.id">{{ group.name }} · {{ group.targets.length }}</option>
-            </select>
+            <Select :model-value="selectedGroupId ?? NO_GROUP_VALUE" :disabled="isExecuting" @update:model-value="(value: any) => requestGroupSelection(value === NO_GROUP_VALUE ? '' : String(value))">
+              <SelectTrigger class="h-8 w-full text-sm"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem :value="NO_GROUP_VALUE">{{ t("multiDbExecute.noGroupSelected") }}</SelectItem>
+                <SelectItem v-for="group in compatibleGroups" :key="group.id" :value="group.id">{{ group.name }} · {{ group.targets.length }}</SelectItem>
+              </SelectContent>
+            </Select>
             <div class="flex items-center justify-between text-xs text-muted-foreground">
               <span
                 >{{ t("multiDbExecute.databaseType") }}: <strong class="text-foreground">{{ databaseType || "-" }}</strong></span
diff --git a/apps/desktop/src/components/editor/__tests__/MultiDbExecuteDialog.spec.ts b/apps/desktop/src/components/editor/__tests__/MultiDbExecuteDialog.spec.ts
new file mode 100644
index 0000000000..c9c492e66b
--- /dev/null
+++ b/apps/desktop/src/components/editor/__tests__/MultiDbExecuteDialog.spec.ts
@@ -0,0 +1,23 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+// reka-ui's SelectItem throws on value="" (SelectItem.js: "A <SelectItem /> must
+// have a value prop that is not an empty string"). The throw happens while the
+// select's dismissable layer is up, and the leftover layer then blocks every
+// click in the app — dialogs can no longer be closed. These dialogs use
+// sentinel values instead; keep it that way.
+const multiDbDialogSource = readFileSync(resolve(process.cwd(), "apps/desktop/src/components/editor/MultiDbExecuteDialog.vue"), "utf8");
+const tagPanelSource = readFileSync(resolve(process.cwd(), "apps/desktop/src/components/config/TagManagementPanel.vue"), "utf8");
+
+describe("Select empty-value regression guard", () => {
+  it("keeps the multi-db target-group select free of empty SelectItem values", () => {
+    expect(multiDbDialogSource).not.toMatch(/<SelectItem\s+value=""/);
+    expect(multiDbDialogSource).toContain("NO_GROUP_VALUE");
+  });
+
+  it("keeps the tag environment select free of empty SelectItem values", () => {
+    expect(tagPanelSource).not.toMatch(/<SelectItem\s+value=""/);
+    expect(tagPanelSource).toContain("ALL_ENVIRONMENTS");
+  });
+});
diff --git a/apps/desktop/src/components/grid/DataGridColumnHeader.vue b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
index 30c3189eac..c4566443c4 100644
--- a/apps/desktop/src/components/grid/DataGridColumnHeader.vue
+++ b/apps/desktop/src/components/grid/DataGridColumnHeader.vue
@@ -82,7 +82,7 @@ const emit = defineEmits<{
           }}</span>
         </span>
         <template #content>
-          <div class="grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 px-3 py-2">
+          <div class="dbx-column-info-tooltip grid min-w-56 grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-1 px-3 py-2">
             <span class="text-background/70">{{ columnNameLabel }}</span>
             <span class="flex min-w-0 items-center gap-2">
               <span class="min-w-0 flex-1 truncate font-mono">{{ name }}</span>
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
index 457a43bf2e..64b98ede80 100644
--- a/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
+++ b/apps/desktop/src/components/grid/__tests__/DataGridSurfaces.spec.ts
@@ -101,6 +101,7 @@ import DataGridQueryControls from "@/components/grid/DataGridQueryControls.vue";
 import DataGridSearchBar from "@/components/grid/DataGridSearchBar.vue";
 
 const dataGridSource = readFileSync("apps/desktop/src/components/grid/DataGrid.vue", "utf8");
+const globalsCss = readFileSync("apps/desktop/src/styles/globals.css", "utf8");
 
 function detail(patch: Partial<DataGridCellDetail> = {}): DataGridCellDetail {
   return {
@@ -419,6 +420,32 @@ describe("DataGridColumnHeader", () => {
     expect(resizeHandle.parent).not.toBe(tooltip);
   });
 
+  it("renders the metadata tooltip type value with the softened type palette", () => {
+    const mounted = mountComponent(DataGridColumnHeader, {
+      name: "title",
+      actualColumnIndex: 0,
+      visibleColumnIndex: 0,
+      showTypeLine: true,
+      columnType: "varchar(255)",
+      typeClass: "data-grid-type-string",
+      copyColumnNameLabel: "copy",
+      columnNameLabel: "name",
+      columnTypeLabel: "type",
+      columnCommentLabel: "comment",
+    });
+    // The vivid 300-level dark-mode type palette is tuned for grid cells and
+    // glares on the popover surface. The tooltip container re-defines the type
+    // CSS variables with softer 400-level values while keeping the per-kind hue.
+    const tooltipContent = findOne(mounted.root, (node) => String(node.props?.class ?? "").includes("dbx-column-info-tooltip"));
+    expect(tooltipContent).toBeDefined();
+    const tooltipType = findOne(mounted.root, (node) => hostText(node) === "varchar(255)" && node.props["data-grid-header-type-line"] === undefined);
+    expect(String(tooltipType.props.class ?? "")).toContain("data-grid-type-string");
+    const headerTypeLine = findOne(mounted.root, (node) => hostText(node) === "varchar(255)" && node.props["data-grid-header-type-line"] === "");
+    expect(String(headerTypeLine.props.class)).toContain("data-grid-type-string");
+    // Softer dark-mode palette override for the tooltip container.
+    expect(globalsCss).toMatch(/\.dark \.dbx-column-info-tooltip \{[^}]*--data-grid-type-string-fg: #4ade80/);
+  });
+
   it("cancels resize-handle clicks without leaking header click events", () => {
     const click = vi.fn();
     const clickCapture = vi.fn();
diff --git a/apps/desktop/src/components/layout/UpdateDialog.vue b/apps/desktop/src/components/layout/UpdateDialog.vue
index a8642c5b86..9108b7623e 100644
--- a/apps/desktop/src/components/layout/UpdateDialog.vue
+++ b/apps/desktop/src/components/layout/UpdateDialog.vue
@@ -90,7 +90,7 @@ watch(
 <template>
   <Dialog :open="open" @update:open="handleOpenChange">
     <DialogContent
-      class="dbx-update-dialog sm:max-w-[700px]"
+      class="sm:max-w-[700px]"
       :show-close-button="!isCloseBlocked"
       @interact-outside="
         (e: Event) => {
@@ -174,14 +174,3 @@ watch(
     </DialogContent>
   </Dialog>
 </template>
-
-<style>
-html.dbx-legacy-webview [data-slot="dialog-content"].dbx-update-dialog[class~="max-w-sm"] {
-  max-width: 700px !important;
-}
-
-html.dbx-legacy-webview [data-slot="dialog-content"].dbx-update-dialog [data-slot="dialog-footer"] {
-  flex-direction: row !important;
-  justify-content: flex-end !important;
-}
-</style>
diff --git a/apps/desktop/src/components/objects/DdlViewDialog.vue b/apps/desktop/src/components/objects/DdlViewDialog.vue
index 9338059853..e6c7793af7 100644
--- a/apps/desktop/src/components/objects/DdlViewDialog.vue
+++ b/apps/desktop/src/components/objects/DdlViewDialog.vue
@@ -276,13 +276,4 @@ function onClose() {
 .ddl-view-editor :deep(.cm-content ::selection) {
   background: var(--dbx-editor-selection-background, rgba(59, 130, 246, 0.35)) !important;
 }
-
-html.dbx-legacy-webview [data-slot="dialog-content"].dbx-ddl-view-dialog[class~="max-w-sm"] {
-  max-width: 47.5rem !important;
-}
-
-html.dbx-legacy-webview [data-slot="dialog-content"].dbx-ddl-view-dialog [data-slot="dialog-footer"] {
-  flex-direction: row !important;
-  justify-content: flex-end !important;
-}
 </style>
diff --git a/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.fixture.vue b/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.fixture.vue
new file mode 100644
index 0000000000..a8e23cc0a3
--- /dev/null
+++ b/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.fixture.vue
@@ -0,0 +1,25 @@
+<template>
+  <Dialog :open="true">
+    <DialogContent class="dbx-ddl-view-dialog sm:max-w-190">
+      <div>fixture body</div>
+      <DialogFooter>
+        <Button>fixture action</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { Dialog, DialogContent, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+</script>
+
+<style scoped>
+html.dbx-legacy-webview [data-slot="dialog-content"].dbx-ddl-view-dialog[class~="max-w-sm"] {
+  max-width: 47.5rem !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"].dbx-ddl-view-dialog [data-slot="dialog-footer"] {
+  flex-direction: row !important;
+}
+</style>
diff --git a/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.spec.ts b/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.spec.ts
new file mode 100644
index 0000000000..063c318208
--- /dev/null
+++ b/apps/desktop/src/components/objects/__tests__/DdlDialog.legacyScope.spec.ts
@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { createI18n } from "vue-i18n";
+import { afterEach, describe, expect, it } from "vitest";
+import DdlScopeFixture from "./DdlDialog.legacyScope.fixture.vue";
+
+const ddlViewDialogSource = readFileSync(resolve(process.cwd(), "apps/desktop/src/components/objects/DdlViewDialog.vue"), "utf8");
+
+const mountedApps: App[] = [];
+
+afterEach(() => {
+  for (const app of mountedApps) app.unmount();
+  mountedApps.length = 0;
+  document.body.innerHTML = "";
+});
+
+async function flushFrames(frames = 4) {
+  for (let i = 0; i < frames; i += 1) {
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+function mountFixture() {
+  const host = defineComponent({
+    setup: () => () => h(DdlScopeFixture),
+  });
+  const container = document.createElement("div");
+  document.body.append(container);
+  const app = createApp(host);
+  app.use(
+    createI18n({
+      legacy: false,
+      locale: "zh-CN",
+      messages: { "zh-CN": {} },
+    }),
+  );
+  app.mount(container);
+  mountedApps.push(app);
+}
+
+describe("DdlViewDialog legacy fallback selectors", () => {
+  it("does not deliver the parent scope attribute to teleported dialog content", async () => {
+    mountFixture();
+    await flushFrames();
+
+    const scopeId = (DdlScopeFixture as unknown as { __scopeId?: string }).__scopeId;
+    expect(scopeId).toMatch(/^data-v-/);
+
+    const content = document.body.querySelector<HTMLElement>('[data-slot="dialog-content"]');
+    const footer = document.body.querySelector<HTMLElement>('[data-slot="dialog-footer"]');
+    expect(content).not.toBeNull();
+    expect(content!.className).toContain("dbx-ddl-view-dialog");
+    expect(content!.className).toContain("max-w-sm");
+    // The dialog content element is rendered by the child DialogContent component
+    // through reka-ui's portal Teleport, so the parent scoped-style attribute
+    // never reaches it; the footer element is one level down and does get it.
+    expect(content!.hasAttribute(scopeId!)).toBe(false);
+    expect(footer!.hasAttribute(scopeId!)).toBe(true);
+  });
+
+  it("keeps the DDL dialog free of per-dialog legacy fallback rules", () => {
+    // The dialog content element is rendered through reka-ui's portal Teleport and
+    // never carries this component's scoped data-v attribute, so per-dialog rules
+    // are avoided entirely: width comes from the global sm:max-w-190 legacy entry
+    // and the footer layout from the global dialog-footer rule.
+    expect(ddlViewDialogSource).not.toContain("dbx-legacy-webview");
+    expect(ddlViewDialogSource).not.toContain("@media");
+    expect(ddlViewDialogSource).toContain('class="dbx-ddl-view-dialog sm:max-w-190"');
+  });
+});
diff --git a/apps/desktop/src/lib/ai/__tests__/aiCodeHighlighter.spec.ts b/apps/desktop/src/lib/ai/__tests__/aiCodeHighlighter.spec.ts
index 7e1d4ce8ee..121da84c11 100644
--- a/apps/desktop/src/lib/ai/__tests__/aiCodeHighlighter.spec.ts
+++ b/apps/desktop/src/lib/ai/__tests__/aiCodeHighlighter.spec.ts
@@ -25,4 +25,21 @@ describe("createAiShikiBlockCodeHighlighter", () => {
     expect(html).not.toContain("<pre");
     expect(html).not.toContain("<code");
   });
+
+  it("can build the oniguruma WASM engine used on legacy WebViews", async () => {
+    // Mirrors the exact wiring loadAiShikiHighlighter uses on WebKit engines
+    // that cannot compile the JavaScript engine's lookbehind patterns, so a
+    // broken shiki/wasm integration fails here instead of on a packaged app.
+    const [{ createHighlighterCore }, { createOnigurumaEngine }, { default: sql }, { default: githubLight }] = await Promise.all([import("shiki/core"), import("shiki/engine/oniguruma"), import("shiki/langs/sql.mjs"), import("shiki/themes/github-light.mjs")]);
+    const highlighter = await createHighlighterCore({
+      engine: await createOnigurumaEngine(import("shiki/wasm")),
+      langs: [sql],
+      themes: [githubLight],
+    });
+
+    const html = highlighter.codeToHtml("SELECT id FROM users", { lang: "sql", structure: "classic", theme: "github-light" });
+
+    expect(html).toContain('class="line"');
+    expect(html).toMatch(/style="color:#/);
+  }, 30_000);
 });
diff --git a/apps/desktop/src/lib/ai/aiCodeHighlighter.ts b/apps/desktop/src/lib/ai/aiCodeHighlighter.ts
index b9ceb5f9d0..c92fa1033f 100644
--- a/apps/desktop/src/lib/ai/aiCodeHighlighter.ts
+++ b/apps/desktop/src/lib/ai/aiCodeHighlighter.ts
@@ -1,4 +1,5 @@
 import type { AppThemeAppearance } from "@/lib/app/appTheme";
+import { supportsRegExpLookbehind } from "@/lib/ui/legacyWebView";
 
 export type AiCodeHighlighter = (content: string, lang: string, appearance?: AppThemeAppearance) => string;
 
@@ -96,9 +97,15 @@ function getAiShikiHighlighter(): Promise<ShikiHighlighter> {
 }
 
 async function loadAiShikiHighlighter(): Promise<ShikiHighlighter> {
-  const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, githubDark, githubLight, bash, css, go, html, java, javascript, json, markdown, php, python, rust, shellscript, sql, tsx, typescript, vue, xml, yaml] = await Promise.all([
+  const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, onigurumaEngineModules, githubDark, githubLight, bash, css, go, html, java, javascript, json, markdown, php, python, rust, shellscript, sql, tsx, typescript, vue, xml, yaml] = await Promise.all([
     import("shiki/core"),
     import("shiki/engine/javascript"),
+    // Old WebKit (Safari < 16.4) throws SyntaxError while compiling the
+    // lookbehind / named-group patterns the JavaScript engine generates from
+    // TextMate grammars (code snapshots and AI code blocks then lose all
+    // highlighting). Only fetch the heavier inlined-Oniguruma WASM bundle on
+    // engines that need it.
+    supportsRegExpLookbehind() ? Promise.resolve(null) : Promise.all([import("shiki/engine/oniguruma"), import("shiki/wasm")]),
     import("shiki/themes/github-dark.mjs"),
     import("shiki/themes/github-light.mjs"),
     import("shiki/langs/bash.mjs"),
@@ -122,7 +129,7 @@ async function loadAiShikiHighlighter(): Promise<ShikiHighlighter> {
   ]);
 
   return createHighlighterCore({
-    engine: createJavaScriptRegexEngine(),
+    engine: onigurumaEngineModules ? await onigurumaEngineModules[0].createOnigurumaEngine(onigurumaEngineModules[1]) : createJavaScriptRegexEngine(),
     langs: [bash.default, css.default, go.default, html.default, java.default, javascript.default, json.default, markdown.default, php.default, python.default, rust.default, shellscript.default, sql.default, tsx.default, typescript.default, vue.default, xml.default, yaml.default],
     themes: [githubDark.default, githubLight.default],
   });
diff --git a/apps/desktop/src/lib/codeSnapshot/__tests__/codeSnapshot.spec.ts b/apps/desktop/src/lib/codeSnapshot/__tests__/codeSnapshot.spec.ts
index 0d0b965ac5..2627469761 100644
--- a/apps/desktop/src/lib/codeSnapshot/__tests__/codeSnapshot.spec.ts
+++ b/apps/desktop/src/lib/codeSnapshot/__tests__/codeSnapshot.spec.ts
@@ -119,6 +119,60 @@ describe("renderCodeSnapshotHtml", () => {
     expect(html).not.toContain('class="dbx-code-snapshot__pre dbx-code-snapshot__pre--numbered"');
   });
 
+  it("gives SQL table names their own color, distinct from quoted fields", async () => {
+    // Mirror shiki's classic structure: one .line span per source line.
+    highlightCode.mockImplementation((content: string) =>
+      content
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<span class="line">${line}</span>`)
+        .join(""),
+    );
+    const html = await renderCodeSnapshotHtml({ code: "SELECT `id`, `title`\nFROM `tb_book`;", lang: "sql" }, { appearance: "light" });
+
+    expect(html).toContain('data-sql-token="table"');
+    expect(html).toContain("color:#116329");
+    // Only the table name is marked; the selected fields keep the identifier color.
+    expect(html.match(/data-sql-token="table"/g)).toHaveLength(1);
+    expect(html).toMatch(/data-sql-token="table"[^>]*>`?tb_book`</);
+    expect(html).not.toMatch(/data-sql-token="table"[^>]*>`?id</);
+  });
+
+  it("marks every table across FROM lists, aliases and JOIN clauses", async () => {
+    highlightCode.mockImplementation((content: string) =>
+      content
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<span class="line">${line}</span>`)
+        .join(""),
+    );
+    const html = await renderCodeSnapshotHtml({ code: "SELECT *\nFROM users u, orders o\nJOIN items i ON i.order_id = u.id", lang: "sql" }, { appearance: "dark" });
+
+    expect(html).toContain("color:#7ee787");
+    for (const table of ["users", "orders", "items"]) {
+      expect(html).toMatch(new RegExp(`data-sql-token="table"[^>]*>${table}</span>`));
+    }
+    // Fields referenced in the projection and join condition stay unmarked.
+    expect(html.match(/data-sql-token="table"/g)).toHaveLength(3);
+  });
+
+  it("maps table offsets correctly across CRLF line breaks", async () => {
+    highlightCode.mockImplementation((content: string) =>
+      content
+        .split(/\r\n|\r|\n/)
+        .map((line) => `<span class="line">${line}</span>`)
+        .join(""),
+    );
+    const html = await renderCodeSnapshotHtml({ code: "SELECT `id`\r\nFROM `tb_book`", lang: "sql" }, { appearance: "light" });
+
+    expect(html).toMatch(/data-sql-token="table"[^>]*>`?tb_book`</);
+    expect(html).not.toMatch(/data-sql-token="table"[^>]*>`?id</);
+  });
+
+  it("skips table-name marking for non-SQL languages", async () => {
+    const html = await renderCodeSnapshotHtml({ code: "from app import models", lang: "python" }, { appearance: "light" });
+
+    expect(html).not.toContain('data-sql-token="table"');
+  });
+
   it("escapes the snapshot title", async () => {
     const html = await renderCodeSnapshotHtml({ code: "SELECT 1", lang: "sql", title: `<script>alert(1)</script>` }, { appearance: "dark" });
 
diff --git a/apps/desktop/src/lib/codeSnapshot/codeSnapshot.ts b/apps/desktop/src/lib/codeSnapshot/codeSnapshot.ts
index 6db78a5cd9..61257320ba 100644
--- a/apps/desktop/src/lib/codeSnapshot/codeSnapshot.ts
+++ b/apps/desktop/src/lib/codeSnapshot/codeSnapshot.ts
@@ -14,6 +14,7 @@
 import type { AppThemeAppearance } from "@/lib/app/appTheme";
 import { createAiShikiBlockCodeHighlighter, type AiCodeHighlighter } from "@/lib/ai/aiCodeHighlighter";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
+import { sqlSemanticTableNameSpans } from "@/lib/sql/semantic/model";
 import { LEGACY_WEBVIEW_CLASS } from "@/lib/ui/legacyWebView";
 
 export interface CodeSnapshotSource {
@@ -61,6 +62,13 @@ const SNAPSHOT_CODE_TEXT: Record<AppThemeAppearance, string> = {
   dark: "#e1e4e8",
 };
 
+const SNAPSHOT_TABLE_NAME_COLOR: Record<AppThemeAppearance, string> = {
+  light: "#116329",
+  dark: "#7ee787",
+};
+
+const SQL_SNAPSHOT_LANGS = new Set(["sql", "mysql", "postgresql", "postgres", "tsql", "clickhouse", "sqlite"]);
+
 const TRAFFIC_LIGHT_COLORS = ["#ff5f57", "#febc2e", "#28c840"] as const;
 const MAX_EXPORT_PIXEL_RATIO = 2;
 const MAX_EXPORT_CANVAS_EDGE = 16_384;
@@ -218,6 +226,81 @@ export function materializeSnapshotCloneLineNumbers(root: ParentNode): void {
   }
 }
 
+/**
+ * Give SQL table names their own color so they stand apart from field
+ * identifiers — shiki renders quoted table and column identifiers with the
+ * same string token color, while the editor marks table names semantically.
+ * The same metadata-free analyzer as the editor's table-name highlight maps
+ * table spans onto the highlighted HTML; the wrapper carries an inline color,
+ * so the preview and both export paths (clipboard/PNG clone of this DOM) stay
+ * identical.
+ */
+export function applySnapshotSqlTableColors(highlightedBody: string, rawCode: string, appearance: AppThemeAppearance): string {
+  let tableSpans: Array<{ start: number; end: number }>;
+  try {
+    tableSpans = sqlSemanticTableNameSpans(rawCode);
+  } catch {
+    return highlightedBody;
+  }
+  if (tableSpans.length === 0) return highlightedBody;
+
+  const parsed = new DOMParser().parseFromString(`<t>${highlightedBody}</t>`, "text/html");
+  const root = parsed.body.firstElementChild;
+  if (!root) return highlightedBody;
+
+  // Line starts in the raw code; shiki splits lines into .line elements whose
+  // text no longer contains the separators, so offsets are mapped per line.
+  const lineStarts: number[] = [0];
+  for (let index = 0; index < rawCode.length; index += 1) {
+    if (rawCode[index] === "\n") lineStarts.push(index + 1);
+    else if (rawCode[index] === "\r") lineStarts.push(index + (rawCode[index + 1] === "\n" ? 2 : 1));
+  }
+
+  const lineElements = Array.from(root.querySelectorAll<HTMLElement>(".line"));
+  const rawLines = rawCode.split(/\r\n|\r|\n/);
+  const color = SNAPSHOT_TABLE_NAME_COLOR[appearance];
+
+  const wrapRanges = (textNode: Text, nodeStart: number, clipEnd: number, totalLength: number) => {
+    const ranges: Array<[number, number]> = [];
+    for (const span of tableSpans) {
+      const start = Math.max(span.start, nodeStart);
+      const end = Math.min(span.end, nodeStart + totalLength, clipEnd);
+      if (start < end) ranges.push([start - nodeStart, end - nodeStart]);
+    }
+    ranges.sort((a, b) => b[0] - a[0]);
+    for (const [relativeStart, relativeEnd] of ranges) {
+      if (relativeEnd < totalLength) textNode.splitText(relativeEnd);
+      const segment = relativeStart > 0 ? textNode.splitText(relativeStart) : textNode;
+      const wrapper = textNode.ownerDocument!.createElement("span");
+      wrapper.className = "dbx-code-snapshot__table-name";
+      wrapper.setAttribute("data-sql-token", "table");
+      // setAttribute (not style.color) keeps the literal color in the DOM;
+      // style.color serializes engine-dependently (rgb() in WebKit/Chromium).
+      wrapper.setAttribute("style", `color:${color}`);
+      segment.parentNode?.insertBefore(wrapper, segment);
+      wrapper.appendChild(segment);
+    }
+  };
+
+  lineElements.forEach((lineElement, lineIndex) => {
+    const lineStart = lineStarts[lineIndex];
+    const lineEnd = lineStart + (rawLines[lineIndex]?.length ?? 0);
+    const walker = lineElement.ownerDocument!.createTreeWalker(lineElement, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+    while (walker.nextNode()) textNodes.push(walker.currentNode as Text);
+    let position = lineStart;
+    for (const textNode of textNodes) {
+      const totalLength = textNode.length;
+      wrapRanges(textNode, position, lineEnd, totalLength);
+      // splitText keeps the leading part in place; the consumed length is the
+      // original node's length regardless of how the ranges split it.
+      position += totalLength;
+    }
+  });
+
+  return root.innerHTML;
+}
+
 /**
  * Render a self-contained snapshot DOM (as an HTML string) for the given code.
  * The returned string includes its own `<style>` tag and can be injected via
@@ -233,6 +316,10 @@ export async function renderCodeSnapshotHtml(source: CodeSnapshotSource, options
     body = renderEscapedSnapshotLines(source.code);
   }
 
+  if (SQL_SNAPSHOT_LANGS.has(source.lang.trim().toLowerCase())) {
+    body = applySnapshotSqlTableColors(body, source.code, options.appearance);
+  }
+
   const appearance = options.appearance;
   const showBar = options.showTrafficLights !== false || !!source.title;
   const showLineNumbers = options.showLineNumbers !== false;
diff --git a/apps/desktop/src/lib/ui/__tests__/legacyWebView.spec.ts b/apps/desktop/src/lib/ui/__tests__/legacyWebView.spec.ts
index 7747a88716..dcbea6dda4 100644
--- a/apps/desktop/src/lib/ui/__tests__/legacyWebView.spec.ts
+++ b/apps/desktop/src/lib/ui/__tests__/legacyWebView.spec.ts
@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { applyLegacyWebViewClass, isLegacyWebView, LEGACY_WEBVIEW_CLASS, missingLegacyWebViewCapabilities } from "@/lib/ui/legacyWebView";
+import { applyLegacyWebViewClass, isLegacyWebView, LEGACY_WEBVIEW_CLASS, missingLegacyWebViewCapabilities, supportsRegExpLookbehind } from "@/lib/ui/legacyWebView";
 
 const supportedFeatures = new Set(["oklch", "color-mix-oklab", "color-mix-oklch", "has-selector", "dynamic-viewport", "min-function", "media-query-range"]);
 
@@ -84,3 +84,26 @@ describe("legacy WebView detection", () => {
     expect(root.classList.contains(LEGACY_WEBVIEW_CLASS)).toBe(false);
   });
 });
+
+describe("supportsRegExpLookbehind", () => {
+  it("reports support when the engine compiles lookbehind patterns", () => {
+    expect(supportsRegExpLookbehind()).toBe(true);
+  });
+
+  it("reports no support when lookbehind patterns throw like old WebKit", () => {
+    const OriginalRegExp = RegExp;
+    vi.stubGlobal(
+      "RegExp",
+      class extends OriginalRegExp {
+        constructor(pattern: string | RegExp, flags?: string) {
+          if (typeof pattern === "string" && pattern.includes("(?<")) {
+            throw new SyntaxError("Invalid regular expression: invalid group specifier name");
+          }
+          super(pattern, flags);
+        }
+      },
+    );
+
+    expect(supportsRegExpLookbehind()).toBe(false);
+  });
+});
diff --git a/apps/desktop/src/lib/ui/legacyWebView.ts b/apps/desktop/src/lib/ui/legacyWebView.ts
index a522dbd0c5..7527588019 100644
--- a/apps/desktop/src/lib/ui/legacyWebView.ts
+++ b/apps/desktop/src/lib/ui/legacyWebView.ts
@@ -43,6 +43,21 @@ export function missingLegacyWebViewCapabilities(): string[] {
   return MODERN_CSS_FEATURES.filter((feature) => !supports(feature)).map((feature) => feature.name);
 }
 
+/**
+ * Old WebKit (Safari < 16.4) throws SyntaxError when compiling regular
+ * expressions with lookbehind or the named-group shapes Shiki's JavaScript
+ * engine generates from TextMate grammars. Callers use this to pick a regex
+ * engine (e.g. Shiki's Oniguruma WASM engine) that old WebKit can run.
+ */
+export function supportsRegExpLookbehind(): boolean {
+  try {
+    new RegExp("(?<=a)b");
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 export function isLegacyWebView(): boolean {
   return missingLegacyWebViewCapabilities().length > 0;
 }
diff --git a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
index b292a6f29e..779c46194a 100644
--- a/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
+++ b/apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
@@ -11,6 +11,7 @@ const dataTransferDialogSource = readFileSync(new URL("../../components/transfer
 const updateDialogSource = readFileSync(new URL("../../components/layout/UpdateDialog.vue", import.meta.url), "utf8");
 const dataGridColumnHeaderSource = readFileSync(new URL("../../components/grid/DataGridColumnHeader.vue", import.meta.url), "utf8");
 const ddlViewDialogSource = readFileSync(new URL("../../components/objects/DdlViewDialog.vue", import.meta.url), "utf8");
+const schemaDiagramDialogSource = readFileSync(new URL("../../components/diagram/SchemaDiagramDialog.vue", import.meta.url), "utf8");
 const connectionDialogSource = readFileSync(new URL("../../components/connection/ConnectionDialog.vue", import.meta.url), "utf8");
 const connectionTreeSource = readFileSync(new URL("../../components/sidebar/ConnectionTree.vue", import.meta.url), "utf8");
 const activeConnectionFilterSource = readFileSync(new URL("../../components/sidebar/ActiveConnectionFilterButton.vue", import.meta.url), "utf8");
@@ -27,6 +28,24 @@ const legacyWebViewSource = readFileSync(new URL("../../lib/ui/legacyWebView.ts"
 const mainSource = readFileSync(new URL("../../main.ts", import.meta.url), "utf8");
 
 describe("legacy WebView CSS fallbacks", () => {
+  it("keeps globals.css balanced and free of min-width media wrappers", () => {
+    // Production CSS minification rewrites `@media (min-width: ...)` into range
+    // syntax that legacy WebViews cannot parse, which silently disables any rule
+    // placed inside one. The html.dbx-legacy-webview class is the only gate, so
+    // no fallback rule may live inside a min-width media query. The brace check
+    // guards the unwrap refactors against dropping rule closers.
+    expect(globalsCss).not.toMatch(/@media \(min-width[^)]*\)\s*\{/);
+    // The Tailwind @source glob (../**/*.{vue,...}) contains a literal "*/",
+    // so it must be excluded before stripping comments.
+    const withoutComments = globalsCss.replace(/^@source .*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const opens = (withoutComments.match(/\{/g) ?? []).length;
+    const closes = (withoutComments.match(/\}/g) ?? []).length;
+    expect(opens).toBe(closes);
+    expect(globalsCss).toContain("html.dbx-legacy-webview .sm\\:flex-row");
+    expect(globalsCss).toContain("html.dbx-legacy-webview .md\\:w-full");
+    expect(globalsCss).toContain("html.dbx-legacy-webview .lg\\:grid-cols-6");
+  });
+
   it("scopes component overrides to the runtime legacy WebView class", () => {
     const fallbackStart = globalsCss.indexOf("html.dbx-legacy-webview .sm\\:block");
     const tabsOverride = globalsCss.indexOf('html.dbx-legacy-webview [data-slot="tabs-trigger"]');
@@ -95,30 +114,79 @@ describe("legacy WebView CSS fallbacks", () => {
     expect(globalsCss).not.toContain(".dbx-transfer-dialog");
   });
 
-  it("keeps the code snapshot dialog layout scoped to legacy WebViews without media queries", () => {
-    expect(codeSnapshotDialogSource).toContain('class="dbx-code-snapshot-dialog flex max-h-[calc(var(--dbx-viewport-height)-2rem)] flex-col overflow-hidden border border-border !bg-background text-foreground shadow-2xl !backdrop-blur-none sm:max-w-[860px]"');
-    expect(codeSnapshotDialogSource).toContain('class="dbx-code-snapshot-dialog__footer"');
-    expect(codeSnapshotDialogSource).toContain('html.dbx-legacy-webview [data-slot="dialog-content"].dbx-code-snapshot-dialog');
-    expect(codeSnapshotDialogSource).toContain("width: calc(100vw - 2rem) !important;");
-    expect(codeSnapshotDialogSource).toContain("flex-direction: row !important;");
-    expect(codeSnapshotDialogSource).toContain("flex-wrap: nowrap !important;");
-    expect(codeSnapshotDialogSource).toContain("justify-content: flex-end !important;");
+  it("covers the transfer dialog footer through the global legacy rule", () => {
+    expect(dataTransferDialogSource).not.toContain('[data-slot="dialog-footer"]');
+  });
+
+  it("keeps the code snapshot dialog layout on the global legacy dialog fallbacks", () => {
+    expect(codeSnapshotDialogSource).toContain('class="flex max-h-[calc(var(--dbx-viewport-height)-2rem)] flex-col overflow-hidden border border-border !bg-background text-foreground shadow-2xl !backdrop-blur-none sm:max-w-[860px]"');
+    expect(codeSnapshotDialogSource).not.toContain("dbx-legacy-webview");
     expect(codeSnapshotDialogSource).not.toContain("@media");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[860px]"]');
   });
 
-  it("keeps the update dialog's wide layout fallback scoped to legacy WebViews without media queries", () => {
-    expect(updateDialogSource).toContain('class="dbx-update-dialog sm:max-w-[700px]"');
-    expect(updateDialogSource).toContain('html.dbx-legacy-webview [data-slot="dialog-content"].dbx-update-dialog[class~="max-w-sm"]');
-    expect(updateDialogSource).toContain('dbx-update-dialog [data-slot="dialog-footer"]');
+  it("keeps the update dialog layout on the global legacy dialog fallbacks", () => {
+    expect(updateDialogSource).toContain('class="sm:max-w-[700px]"');
+    expect(updateDialogSource).not.toContain("dbx-legacy-webview");
     expect(updateDialogSource).not.toContain("@media");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[700px]"]');
   });
 
-  it("keeps the DDL dialog's desktop layout scoped to legacy WebViews without media queries", () => {
+  it("keeps the DDL dialog layout on the global legacy dialog fallbacks", () => {
     expect(ddlViewDialogSource).toContain('class="dbx-ddl-view-dialog sm:max-w-190"');
-    expect(ddlViewDialogSource).toContain('html.dbx-legacy-webview [data-slot="dialog-content"].dbx-ddl-view-dialog[class~="max-w-sm"]');
-    expect(ddlViewDialogSource).toContain("max-width: 47.5rem !important;");
-    expect(ddlViewDialogSource).toContain('dbx-ddl-view-dialog [data-slot="dialog-footer"]');
+    // The dialog content element is rendered through reka-ui's portal Teleport and
+    // never carries this component's scoped data-v attribute, so per-dialog rules
+    // (scoped or unscoped) are avoided; the global width table covers the dialog.
+    expect(ddlViewDialogSource).not.toContain("dbx-legacy-webview");
     expect(ddlViewDialogSource).not.toContain("@media");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-190"]');
+  });
+
+  it("keeps the global dialog fallback block outside media queries", () => {
+    // Production minification rewrites `@media (min-width: ...)` into range syntax
+    // that legacy WebViews cannot parse, so this block must stay unwrapped.
+    const footerStart = globalsCss.indexOf('html.dbx-legacy-webview [data-slot="dialog-footer"]');
+    const splitpanesStart = globalsCss.indexOf("/* Splitpanes */", footerStart);
+
+    expect(footerStart).toBeGreaterThan(-1);
+    expect(splitpanesStart).toBeGreaterThan(footerStart);
+    const dialogFallbackBlock = globalsCss.slice(footerStart, splitpanesStart);
+    expect(dialogFallbackBlock).toContain("flex-direction: row !important;");
+    expect(dialogFallbackBlock).toContain("justify-content: flex-end !important;");
+    expect(dialogFallbackBlock).toContain("max-width: 47.5rem !important;");
+    expect(dialogFallbackBlock).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[1120px]"]');
+    expect(dialogFallbackBlock).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[min(1180px,calc(100vw-32px))]"]');
+    expect(dialogFallbackBlock).not.toContain("@media");
+  });
+
+  it("covers unprefixed arbitrary dialog max-widths that lose to the generic cap", () => {
+    // Arbitrary max-w-* utilities live in @layer utilities and lose to the
+    // un-layered 24rem generic cap in every engine (multi-db execute dialog).
+    const multiDbDialogSource = readFileSync(new URL("../../components/editor/MultiDbExecuteDialog.vue", import.meta.url), "utf8");
+    expect(multiDbDialogSource).toContain("max-w-[min(1080px,calc(100vw-32px))]");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="max-w-[min(1080px"]');
+    expect(globalsCss).toContain("max-width: min(1080px, calc(100vw - 2rem)) !important;");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="max-w-[1800px]"]');
+  });
+
+  it("keeps the schema diagram dialog width covered by the legacy width fallbacks", () => {
+    // The toolbar is overflow-x-auto: when the legacy WebView clamps the dialog
+    // to the generic 24rem cap, the toolbar controls get cut off entirely.
+    expect(schemaDiagramDialogSource).toContain("sm:max-w-[94vw]");
+    expect(globalsCss).toContain('html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[94vw]"]');
+  });
+
+  it("keeps the schema diagram fullscreen mode above the generic legacy width cap", () => {
+    // Fullscreen drops the sm:max-w-* classes and relies on inline width, which
+    // the generic 24rem !important cap outranks in legacy WebViews — the dialog
+    // then renders 24rem wide and the canvas collapses to a sliver.
+    expect(schemaDiagramDialogSource).toContain("dbx-diagram-fullscreen");
+    const ruleStart = globalsCss.indexOf('html.dbx-legacy-webview [data-slot="dialog-content"].dbx-diagram-fullscreen');
+    expect(ruleStart).toBeGreaterThan(globalsCss.indexOf('html.dbx-legacy-webview [data-slot="dialog-content"][class~="max-w-sm"]'));
+    const rule = globalsCss.slice(ruleStart, globalsCss.indexOf("}", ruleStart));
+    expect(rule).toContain("max-width: none !important;");
+    expect(rule).toContain("width: calc(100vw - 2rem) !important;");
+    expect(rule).toContain("var(--dbx-viewport-height)");
   });
 
   it("uses an explicit tooltip copy-button hover color in legacy WebViews", () => {
diff --git a/apps/desktop/src/styles/globals.css b/apps/desktop/src/styles/globals.css
index 832a463e6d..9305e0bb10 100644
--- a/apps/desktop/src/styles/globals.css
+++ b/apps/desktop/src/styles/globals.css
@@ -100,6 +100,20 @@
   --data-grid-type-spatial-fg: #6ee7b7;
 }
 
+/* The column-info tooltip re-derives its type hues from these softer 400-level
+ * values: the 300-level grid-cell palette above is tuned for the data surface
+ * and glares on the dark popover. Light mode keeps the 700-level base. */
+.dark .dbx-column-info-tooltip {
+  --data-grid-type-integer-fg: #60a5fa;
+  --data-grid-type-numeric-fg: #22d3ee;
+  --data-grid-type-string-fg: #4ade80;
+  --data-grid-type-boolean-fg: #fb923c;
+  --data-grid-type-temporal-fg: #c084fc;
+  --data-grid-type-structured-fg: #f472b6;
+  --data-grid-type-identifier-fg: #fbbf24;
+  --data-grid-type-binary-fg: #f87171;
+  --data-grid-type-spatial-fg: #34d399;
+}
 @layer components {
   .data-grid-type-integer {
     color: var(--data-grid-type-integer-fg);
@@ -1581,194 +1595,193 @@ html.dbx-data-grid-native-selection-blocked [role="textbox"] * {
 
 /* Tailwind CSS v4 targets Safari 16.4+. The startup capability check marks
  * older WebViews with .dbx-legacy-webview before the app mounts. */
-@media (min-width: 640px) {
-  html.dbx-legacy-webview .sm\:block {
-    display: block !important;
-  }
-
-  html.dbx-legacy-webview .sm\:hidden {
-    display: none !important;
-  }
-
-  html.dbx-legacy-webview .sm\:inline {
-    display: inline !important;
-  }
-
-  html.dbx-legacy-webview .sm\:flex-row {
-    flex-direction: row !important;
-  }
-
-  html.dbx-legacy-webview .sm\:flex-wrap {
-    flex-wrap: wrap !important;
-  }
-
-  html.dbx-legacy-webview .sm\:items-start {
-    align-items: flex-start !important;
-  }
-
-  html.dbx-legacy-webview .sm\:items-center {
-    align-items: center !important;
-  }
-
-  html.dbx-legacy-webview .sm\:justify-between {
-    justify-content: space-between !important;
-  }
-
-  html.dbx-legacy-webview .sm\:justify-end {
-    justify-content: flex-end !important;
-  }
-
-  html.dbx-legacy-webview .sm\:gap-2 {
-    gap: 0.5rem !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
-    grid-template-columns: minmax(0, 1fr) auto !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,200px\)_minmax\(0\,1fr\)\] {
-    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) !important;
-  }
-
-  html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(220px\,0\.8fr\)\] {
-    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) !important;
-  }
-
-  html.dbx-legacy-webview .sm\:col-span-3 {
-    grid-column: span 3 / span 3 !important;
-  }
-
-  html.dbx-legacy-webview .sm\:w-full {
-    width: 100% !important;
-  }
-
-  html.dbx-legacy-webview .sm\:w-40 {
-    width: 10rem !important;
-  }
-
-  html.dbx-legacy-webview .sm\:w-64 {
-    width: 16rem !important;
-  }
-
-  html.dbx-legacy-webview .sm\:w-auto {
-    width: auto !important;
-  }
-
-  html.dbx-legacy-webview .sm\:flex-none {
-    flex: none !important;
-  }
-
-  html.dbx-legacy-webview .sm\:ml-auto {
-    margin-left: auto !important;
-  }
+/* Like the dialog fallback block below, these breakpoint fallbacks carry no
+ * @media wrapper: production CSS minification rewrites min-width media queries
+ * into range syntax that legacy WebViews cannot parse, and the desktop window
+ * (minWidth 900, see tauri.conf.json) is always wider than these breakpoints
+ * anyway. The html.dbx-legacy-webview class is the only gate. */
+html.dbx-legacy-webview .sm\:block {
+  display: block !important;
 }
 
-@media (min-width: 768px) {
-  html.dbx-legacy-webview .md\:w-full {
-    width: 100% !important;
-  }
-
-  html.dbx-legacy-webview .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  }
-
-  html.dbx-legacy-webview .md\:grid-cols-\[1fr_auto\] {
-    grid-template-columns: 1fr auto !important;
-  }
-
-  html.dbx-legacy-webview .md\:grid-cols-\[minmax\(0\,1fr\)_180px_auto\] {
-    grid-template-columns: minmax(0, 1fr) 180px auto !important;
-  }
+html.dbx-legacy-webview .sm\:hidden {
+  display: none !important;
 }
 
-@media (min-width: 1024px) {
-  html.dbx-legacy-webview .lg\:block {
-    display: block !important;
-  }
+html.dbx-legacy-webview .sm\:inline {
+  display: inline !important;
+}
 
-  html.dbx-legacy-webview .lg\:hidden {
-    display: none !important;
-  }
+html.dbx-legacy-webview .sm\:flex-row {
+  flex-direction: row !important;
+}
 
-  html.dbx-legacy-webview .lg\:grid {
-    display: grid !important;
-  }
+html.dbx-legacy-webview .sm\:flex-wrap {
+  flex-wrap: wrap !important;
+}
 
-  html.dbx-legacy-webview .lg\:flex-row {
-    flex-direction: row !important;
-  }
+html.dbx-legacy-webview .sm\:items-start {
+  align-items: flex-start !important;
+}
 
-  html.dbx-legacy-webview .lg\:flex-col {
-    flex-direction: column !important;
-  }
+html.dbx-legacy-webview .sm\:items-center {
+  align-items: center !important;
+}
 
-  html.dbx-legacy-webview .lg\:items-center {
-    align-items: center !important;
-  }
+html.dbx-legacy-webview .sm\:justify-between {
+  justify-content: space-between !important;
+}
 
-  html.dbx-legacy-webview .lg\:justify-between {
-    justify-content: space-between !important;
-  }
+html.dbx-legacy-webview .sm\:justify-end {
+  justify-content: flex-end !important;
+}
 
-  html.dbx-legacy-webview .lg\:justify-end {
-    justify-content: flex-end !important;
-  }
+html.dbx-legacy-webview .sm\:gap-2 {
+  gap: 0.5rem !important;
+}
 
-  html.dbx-legacy-webview .lg\:w-40 {
-    width: 10rem !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
 
-  html.dbx-legacy-webview .lg\:overflow-x-hidden {
-    overflow-x: hidden !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+}
 
-  html.dbx-legacy-webview .lg\:overflow-y-auto {
-    overflow-y: auto !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+}
 
-  html.dbx-legacy-webview .lg\:border-b-0 {
-    border-bottom-width: 0 !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
+  grid-template-columns: minmax(0, 1fr) auto !important;
+}
 
-  html.dbx-legacy-webview .lg\:border-r {
-    border-right-width: 1px !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,200px\)_minmax\(0\,1fr\)\] {
+  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) !important;
+}
 
-  html.dbx-legacy-webview .lg\:pb-0 {
-    padding-bottom: 0 !important;
-  }
+html.dbx-legacy-webview .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(220px\,0\.8fr\)\] {
+  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr) !important;
+}
 
-  html.dbx-legacy-webview .lg\:pr-3 {
-    padding-right: 0.75rem !important;
-  }
+html.dbx-legacy-webview .sm\:col-span-3 {
+  grid-column: span 3 / span 3 !important;
+}
 
-  html.dbx-legacy-webview .lg\:text-right {
-    text-align: right !important;
-  }
+html.dbx-legacy-webview .sm\:w-full {
+  width: 100% !important;
+}
 
-  html.dbx-legacy-webview .lg\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
-  }
+html.dbx-legacy-webview .sm\:w-40 {
+  width: 10rem !important;
+}
 
-  html.dbx-legacy-webview .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
-    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
-  }
+html.dbx-legacy-webview .sm\:w-64 {
+  width: 16rem !important;
+}
 
-  html.dbx-legacy-webview .lg\:grid-cols-\[minmax\(0\,1\.6fr\)_72px_56px_76px_58px_76px_72px\] {
-    grid-template-columns: minmax(0, 1.6fr) 72px 56px 76px 58px 76px 72px !important;
-  }
+html.dbx-legacy-webview .sm\:w-auto {
+  width: auto !important;
+}
+
+html.dbx-legacy-webview .sm\:flex-none {
+  flex: none !important;
+}
+
+html.dbx-legacy-webview .sm\:ml-auto {
+  margin-left: auto !important;
+}
+
+html.dbx-legacy-webview .md\:w-full {
+  width: 100% !important;
+}
+
+html.dbx-legacy-webview .md\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+}
+
+html.dbx-legacy-webview .md\:grid-cols-\[1fr_auto\] {
+  grid-template-columns: 1fr auto !important;
+}
+
+html.dbx-legacy-webview .md\:grid-cols-\[minmax\(0\,1fr\)_180px_auto\] {
+  grid-template-columns: minmax(0, 1fr) 180px auto !important;
+}
+
+html.dbx-legacy-webview .lg\:block {
+  display: block !important;
+}
+
+html.dbx-legacy-webview .lg\:hidden {
+  display: none !important;
+}
+
+html.dbx-legacy-webview .lg\:grid {
+  display: grid !important;
+}
+
+html.dbx-legacy-webview .lg\:flex-row {
+  flex-direction: row !important;
+}
+
+html.dbx-legacy-webview .lg\:flex-col {
+  flex-direction: column !important;
+}
+
+html.dbx-legacy-webview .lg\:items-center {
+  align-items: center !important;
+}
+
+html.dbx-legacy-webview .lg\:justify-between {
+  justify-content: space-between !important;
+}
+
+html.dbx-legacy-webview .lg\:justify-end {
+  justify-content: flex-end !important;
+}
+
+html.dbx-legacy-webview .lg\:w-40 {
+  width: 10rem !important;
+}
+
+html.dbx-legacy-webview .lg\:overflow-x-hidden {
+  overflow-x: hidden !important;
+}
+
+html.dbx-legacy-webview .lg\:overflow-y-auto {
+  overflow-y: auto !important;
+}
+
+html.dbx-legacy-webview .lg\:border-b-0 {
+  border-bottom-width: 0 !important;
+}
+
+html.dbx-legacy-webview .lg\:border-r {
+  border-right-width: 1px !important;
+}
+
+html.dbx-legacy-webview .lg\:pb-0 {
+  padding-bottom: 0 !important;
+}
+
+html.dbx-legacy-webview .lg\:pr-3 {
+  padding-right: 0.75rem !important;
+}
+
+html.dbx-legacy-webview .lg\:text-right {
+  text-align: right !important;
+}
+
+html.dbx-legacy-webview .lg\:grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+}
+
+html.dbx-legacy-webview .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
+}
+
+html.dbx-legacy-webview .lg\:grid-cols-\[minmax\(0\,1\.6fr\)_72px_56px_76px_58px_76px_72px\] {
+  grid-template-columns: minmax(0, 1.6fr) 72px 56px 76px 58px 76px 72px !important;
 }
 
 html.dbx-legacy-webview [data-slot="dialog-positioner"] {
@@ -1807,6 +1820,17 @@ html.dbx-legacy-webview [data-slot="dialog-content"][class~="max-w-sm"] {
   max-width: 24rem !important;
 }
 
+/* The schema diagram's fullscreen mode drops the sm:max-w-* width classes and
+ * relies on inline width:100%/max-width:100%, which the 24rem !important cap
+ * above outranks in legacy WebViews — the dialog then renders 24rem wide and
+ * the canvas collapses. Stretch it explicitly; matches the positioner padding. */
+html.dbx-legacy-webview [data-slot="dialog-content"].dbx-diagram-fullscreen {
+  width: calc(100vw - 2rem) !important;
+  max-width: none !important;
+  height: calc(var(--dbx-viewport-height) - 2rem) !important;
+  max-height: none !important;
+  border-radius: 0 !important;
+}
 html.dbx-legacy-webview [data-slot="dialog-content"][class~="max-w-md"] {
   max-width: 28rem !important;
 }
@@ -1855,6 +1879,17 @@ html.dbx-legacy-webview [data-slot="dialog-content"][class*="max-w-[min(720px"]
   max-width: 720px !important;
 }
 
+/* Arbitrary (non-breakpoint-prefixed) max-w-* utilities live in @layer
+ * utilities, so they lose to the un-layered 24rem generic cap above in every
+ * engine. Each DialogContent-level width of this shape needs its own
+ * !important entry — like max-w-[min(720px above. */
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="max-w-[min(1080px"] {
+  max-width: min(1080px, calc(100vw - 2rem)) !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="max-w-[1800px]"] {
+  max-width: 1800px !important;
+}
 html.dbx-legacy-webview [data-slot="dialog-content"].dbx-form-dialog {
   display: flex !important;
   flex-direction: column !important;
@@ -2218,135 +2253,184 @@ html.dbx-legacy-webview.dark [data-grid-root] [data-grid-column-index]:hover {
   background-color: rgb(38, 39, 42) !important;
 }
 
-@media (min-width: 640px) {
-  html.dbx-legacy-webview [data-slot="dialog-footer"] {
-    flex-direction: row !important;
-    justify-content: flex-end !important;
-  }
+/* Dialog width and footer fallbacks for legacy WebViews. These rules used to sit
+ * inside @media (min-width: 640px), but production CSS minification rewrites
+ * min-width media queries into range syntax that legacy WebViews cannot parse,
+ * which silently disabled the whole block in packaged builds. The desktop window
+ * never opens below 900px (see tauri.conf.json minWidth), so the breakpoint was
+ * always true and is dropped here. New dialogs only need standard sm:max-w-*
+ * classes; no per-component legacy CSS is needed for width or footer layout. */
+html.dbx-legacy-webview [data-slot="dialog-footer"] {
+  flex-direction: row !important;
+  justify-content: flex-end !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-sm"] {
-    max-width: 24rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-sm"] {
+  max-width: 24rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-md"] {
-    max-width: 28rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-md"] {
+  max-width: 28rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-lg"] {
-    max-width: 32rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-lg"] {
+  max-width: 32rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-xl"] {
-    max-width: 36rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-xl"] {
+  max-width: 36rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-2xl"] {
-    max-width: 42rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-2xl"] {
+  max-width: 42rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-3xl"] {
-    max-width: 48rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-3xl"] {
+  max-width: 48rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-4xl"] {
-    max-width: 56rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-4xl"] {
+  max-width: 56rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-5xl"] {
-    max-width: 64rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-5xl"] {
+  max-width: 64rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-190"] {
-    max-width: 47.5rem !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-190"] {
+  max-width: 47.5rem !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[360px]"] {
-    max-width: 360px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[360px]"] {
+  max-width: 360px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[380px]"] {
-    max-width: 380px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[380px]"] {
+  max-width: 380px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[400px]"] {
-    max-width: 400px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[400px]"] {
+  max-width: 400px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[420px]"] {
-    max-width: 420px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[420px]"] {
+  max-width: 420px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[440px]"] {
-    max-width: 440px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[440px]"] {
+  max-width: 440px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[460px]"] {
-    max-width: 460px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[460px]"] {
+  max-width: 460px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[480px]"] {
-    max-width: 480px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[480px]"] {
+  max-width: 480px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[500px]"] {
-    max-width: 500px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[500px]"] {
+  max-width: 500px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[520px]"] {
-    max-width: 520px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[520px]"] {
+  max-width: 520px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[560px]"] {
-    max-width: 560px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[560px]"] {
+  max-width: 560px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[660px]"] {
-    max-width: 660px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[660px]"] {
+  max-width: 660px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[720px]"] {
-    max-width: 720px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[720px]"] {
+  max-width: 720px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[760px]"] {
-    max-width: 760px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[760px]"] {
+  max-width: 760px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[780px]"] {
-    max-width: 780px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[780px]"] {
+  max-width: 780px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[840px]"] {
-    max-width: 840px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[840px]"] {
+  max-width: 840px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[860px]"] {
-    max-width: 860px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[860px]"] {
+  max-width: 860px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[900px]"] {
-    max-width: 900px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[900px]"] {
+  max-width: 900px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[960px]"] {
-    max-width: 960px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[960px]"] {
+  max-width: 960px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[980px]"] {
-    max-width: 980px !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[980px]"] {
+  max-width: 980px !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[calc(100vw-2rem)]"] {
-    max-width: calc(100vw - 2rem) !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[calc(100vw-2rem)]"] {
+  max-width: calc(100vw - 2rem) !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:!max-w-[92vw]"] {
-    max-width: 92vw !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:!max-w-[92vw]"] {
+  max-width: 92vw !important;
+}
 
-  html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:!max-w-[min(920px,calc(100vw-48px))]"] {
-    max-width: min(920px, calc(100vw - 48px)) !important;
-  }
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:!max-w-[min(920px,calc(100vw-48px))]"] {
+  max-width: min(920px, calc(100vw - 48px)) !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class~="sm:max-w-80"] {
+  max-width: 20rem !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[22rem]"] {
+  max-width: 22rem !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[600px]"] {
+  max-width: 600px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[620px]"] {
+  max-width: 620px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[640px]"] {
+  max-width: 640px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[680px]"] {
+  max-width: 680px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[700px]"] {
+  max-width: 700px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[880px]"] {
+  max-width: 880px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[1120px]"] {
+  max-width: 1120px !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[94vw]"] {
+  max-width: 94vw !important;
+}
+
+html.dbx-legacy-webview [data-slot="dialog-content"][class*="sm:max-w-[min(1180px,calc(100vw-32px))]"] {
+  max-width: min(1180px, calc(100vw - 32px)) !important;
 }
 
 /* Splitpanes */