github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 14:52:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(desktop): improve legacy WebView compatibility

Browse Source
This commit is contained in:
知食分子 authored and GitHub committed 2026-08-12 21:59:52 +08:00
1 parent 6a88df5500
commit 513c3011fc
5 files changed
+92 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/connection/ConnectionDialog.vue
+2 -2
View File
@@ -8180,8 +8180,8 @@ function openExternalUrl(url: string) {
</Tabs>
</div>
<DialogFooter class="flex min-w-0 shrink-0 items-center gap-2 sm:flex-nowrap">
<div class="mr-auto flex min-w-0 flex-1 basis-0 items-center gap-2 overflow-hidden">
<DialogFooter class="connection-dialog-footer flex min-w-0 shrink-0 items-center gap-2 sm:flex-nowrap">
<div class="connection-dialog-test-status mr-auto flex min-w-0 flex-1 basis-0 items-center gap-2 overflow-hidden">
<Button v-if="!editingId" variant="outline" class="shrink-0" :disabled="isSaving" @click="backToDatabasePicker">
<ArrowLeft class="h-4 w-4" />
{{ t("connection.back") }}
apps/desktop/src/components/editor/EditorSettingsDialog.vue
+31 -9
View File
@@ -6243,15 +6243,15 @@ onUnmounted(() => {
<div class="space-y-2">
<Label>{{ t("settings.mcpConfig") }}</Label>
<Tabs v-model="mcpConfigTab" class="space-y-3">
<TabsList class="h-auto min-h-8 w-full min-w-0 max-w-full justify-start gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain group-data-horizontal/tabs:h-auto">
<TabsTrigger value="claude" class="h-7 flex-none shrink-0 px-2.5">Claude Code</TabsTrigger>
<TabsTrigger value="cursor" class="h-7 flex-none shrink-0 px-2.5">Cursor</TabsTrigger>
<TabsTrigger value="trae" class="h-7 flex-none shrink-0 px-2.5">TRAE</TabsTrigger>
<TabsTrigger value="vscode" class="h-7 flex-none shrink-0 px-2.5">VS Code</TabsTrigger>
<TabsTrigger value="windsurf" class="h-7 flex-none shrink-0 px-2.5">Windsurf</TabsTrigger>
<TabsTrigger value="codex" class="h-7 flex-none shrink-0 px-2.5">Codex</TabsTrigger>
<TabsTrigger value="opencode" class="h-7 flex-none shrink-0 px-2.5">OpenCode</TabsTrigger>
<TabsTrigger value="cherry-studio" class="h-7 flex-none shrink-0 px-2.5">Cherry Studio</TabsTrigger>
<TabsList class="settings-mcp-config-tabs h-auto min-h-8 w-full min-w-0 max-w-full justify-start gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain group-data-horizontal/tabs:h-auto">
<TabsTrigger value="claude" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">Claude Code</TabsTrigger>
<TabsTrigger value="cursor" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">Cursor</TabsTrigger>
<TabsTrigger value="trae" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">TRAE</TabsTrigger>
<TabsTrigger value="vscode" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">VS Code</TabsTrigger>
<TabsTrigger value="windsurf" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">Windsurf</TabsTrigger>
<TabsTrigger value="codex" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">Codex</TabsTrigger>
<TabsTrigger value="opencode" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">OpenCode</TabsTrigger>
<TabsTrigger value="cherry-studio" class="settings-mcp-config-tab h-7 flex-none shrink-0 px-2.5">Cherry Studio</TabsTrigger>
</TabsList>
<TabsContent value="claude" class="m-0">
@@ -6821,6 +6821,28 @@ html.dbx-legacy-webview .settings-layout .settings-export-number-input::-webkit-
opacity: 1 !important;
}
html.dbx-legacy-webview .settings-layout .settings-mcp-config-tabs {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.25rem !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
}
html.dbx-legacy-webview .settings-layout .settings-mcp-config-tab {
display: inline-flex !important;
flex: 0 0 auto !important;
width: max-content !important;
min-width: max-content !important;
max-width: none !important;
padding-left: 0.625rem !important;
padding-right: 0.625rem !important;
white-space: nowrap !important;
}
html.dbx-legacy-webview .settings-ai-back-button {
margin-left: -0.625rem !important;
}
apps/desktop/src/components/sidebar/ConnectionTree.vue
+22
View File
@@ -2224,6 +2224,28 @@ defineExpose({ focusSearch, createNewGroup, collapseAllTreeNodes });
background: color-mix(in oklch, var(--foreground) 48%, transparent);
}
html.dbx-legacy-webview .sidebar-tree-scrollbar {
opacity: 0.9;
}
html.dbx-legacy-webview .sidebar-tree-scrollbar__thumb {
background: rgba(82, 82, 82, 0.42);
}
html.dbx-legacy-webview.dark .sidebar-tree-scrollbar__thumb {
background: rgba(212, 212, 216, 0.42);
}
html.dbx-legacy-webview .sidebar-tree-scrollbar:hover .sidebar-tree-scrollbar__thumb,
html.dbx-legacy-webview .sidebar-tree-scrollbar--dragging .sidebar-tree-scrollbar__thumb {
background: rgba(82, 82, 82, 0.62);
}
html.dbx-legacy-webview.dark .sidebar-tree-scrollbar:hover .sidebar-tree-scrollbar__thumb,
html.dbx-legacy-webview.dark .sidebar-tree-scrollbar--dragging .sidebar-tree-scrollbar__thumb {
background: rgba(212, 212, 216, 0.62);
}
.sidebar-tree-horizontal-scrollbar {
position: absolute;
right: 0;
apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
Vendored
+24
View File
@@ -110,6 +110,12 @@ describe("legacy WebView CSS fallbacks", () => {
expect(connectionDialogLegacyCss).toContain("height: 720px !important;");
expect(connectionDialogLegacyCss).toContain('[data-slot="dialog-content"].connection-dialog-content--config .connection-form-body');
expect(connectionDialogLegacyCss).toContain("align-content: start !important;");
expect(connectionDialogSource).toContain("connection-dialog-footer");
expect(connectionDialogSource).toContain("connection-dialog-test-status");
expect(connectionDialogLegacyCss).toContain('[data-slot="dialog-content"].connection-dialog-content--config .connection-dialog-footer');
expect(connectionDialogLegacyCss).toContain("flex-wrap: nowrap !important;");
expect(connectionDialogLegacyCss).toContain('[data-slot="dialog-content"].connection-dialog-content--config .connection-dialog-test-status');
expect(connectionDialogLegacyCss).toContain("min-width: 12rem !important;");
expect(connectionDialogSource).toContain("connection-url-params-row--compact");
expect(connectionDialogSource).toContain("connection-url-params-row--with-hint");
expect(connectionDialogSource).toContain("connection-url-params-label");
@@ -123,6 +129,17 @@ describe("legacy WebView CSS fallbacks", () => {
expect(connectionDialogSource).not.toContain("@media (min-width: 640px)");
});
it("keeps the sidebar table tree scrollbar unchanged outside legacy WebViews", () => {
expect(connectionTreeSource).toContain('class="sidebar-tree-scrollbar"');
expect(connectionTreeSource).toMatch(/\.sidebar-tree-scrollbar \{[\s\S]*?opacity: 0;/);
expect(connectionTreeSource).toContain("html.dbx-legacy-webview .sidebar-tree-scrollbar");
expect(connectionTreeSource).toMatch(/html\.dbx-legacy-webview \.sidebar-tree-scrollbar \{[\s\S]*?opacity: 0\.9;/);
expect(connectionTreeSource).toContain("html.dbx-legacy-webview .sidebar-tree-scrollbar__thumb");
expect(connectionTreeSource).toContain("background: rgba(82, 82, 82, 0.42);");
expect(connectionTreeSource).toContain("html.dbx-legacy-webview.dark .sidebar-tree-scrollbar__thumb");
expect(connectionTreeSource).toContain("background: rgba(212, 212, 216, 0.42);");
});
it("keeps selected tiles readable in WebViews without color-mix support", () => {
const fallbackStart = globalsCss.indexOf("@supports not (background-color: color-mix(in srgb, black 10%, transparent))");
const choiceFallback = globalsCss.indexOf(".dbx-choice-selected", fallbackStart);
@@ -262,6 +279,13 @@ describe("legacy WebView CSS fallbacks", () => {
expect(fallback).toContain("line-height: 1.25rem !important;");
expect(fallback).toContain("-webkit-appearance: inner-spin-button !important;");
expect(fallback).toContain("::-webkit-inner-spin-button");
expect(editorSettingsDialogSource).toContain("settings-mcp-config-tabs");
expect(editorSettingsDialogSource).toContain("settings-mcp-config-tab");
expect(fallback).toContain(".settings-layout .settings-mcp-config-tabs");
expect(fallback).toContain("gap: 0.25rem !important;");
expect(fallback).toContain(".settings-layout .settings-mcp-config-tab");
expect(fallback).toContain("flex: 0 0 auto !important;");
expect(fallback).toContain("min-width: max-content !important;");
expect(editorSettingsDialogSource).toContain('class="settings-ai-back-button"');
expect(fallback).toContain(".settings-ai-back-button");
expect(fallback).toContain("margin-left: -0.625rem !important;");