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

fix(ai-agent): align table scrollbar themes

Browse Source
This commit is contained in:
Abeautifulsnow authored and GitHub committed 2026-08-18 10:52:01 +08:00
1 parent d39d3ec134
commit 99ded5c8bb
2 files changed
+50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/editor/AiAssistant.vue
+31
View File
@@ -3015,6 +3015,37 @@ async function openExternalUrl(url: string) {
border-radius: 0.375rem;
border: 1px solid var(--border);
}
/* WebKit/Chromium-only styling. Do NOT set scrollbar-width/scrollbar-color here:
per CSS Scrollbars spec, a non-auto scrollbar-width makes engines ignore the
::-webkit-scrollbar* rules below (both Tauri webviews support them). */
.ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar) {
width: 6px;
height: 6px;
}
.ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar-track) {
background: transparent;
}
.ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar-thumb) {
border: 1px solid transparent;
border-radius: 999px;
background: rgba(82, 82, 82, 0.28);
background: color-mix(in oklch, var(--foreground) 28%, transparent);
background-clip: padding-box;
}
.ai-markdown :deep(.ai-markdown-table-wrap:hover::-webkit-scrollbar-thumb) {
border: 0;
background: rgba(82, 82, 82, 0.45);
background: color-mix(in oklch, var(--foreground) 45%, transparent);
}
html.dbx-legacy-webview.dark .ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar-thumb) {
background: rgba(212, 212, 216, 0.28);
}
html.dbx-legacy-webview.dark .ai-markdown :deep(.ai-markdown-table-wrap:hover::-webkit-scrollbar-thumb) {
background: rgba(212, 212, 216, 0.45);
}
.ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar-corner) {
background: transparent;
}
.ai-markdown :deep(.ai-markdown-table-wrap table) {
border: none;
margin: 0;
apps/desktop/src/styles/__tests__/legacyWebviewFallback.spec.ts
Vendored
+19
View File
@@ -14,6 +14,7 @@ const tunnelProfileManagerSource = readFileSync(new URL("../../components/connec
const changelogPanelSource = readFileSync(new URL("../../components/settings/ChangelogPanel.vue", import.meta.url), "utf8");
const editorSettingsDialogSource = readFileSync(new URL("../../components/editor/EditorSettingsDialog.vue", import.meta.url), "utf8");
const switchSource = readFileSync(new URL("../../components/ui/switch/Switch.vue", import.meta.url), "utf8");
const aiAssistantSource = readFileSync(new URL("../../components/editor/AiAssistant.vue", import.meta.url), "utf8");
const desktopIndexSource = readFileSync(new URL("../../../index.html", import.meta.url), "utf8");
const connectionDialogLegacyCss = readFileSync(new URL("../../../public/connection-dialog-legacy.css", import.meta.url), "utf8");
const legacyWebViewSource = readFileSync(new URL("../../lib/ui/legacyWebView.ts", import.meta.url), "utf8");
@@ -141,6 +142,24 @@ describe("legacy WebView CSS fallbacks", () => {
expect(connectionTreeSource).toContain("background: rgba(212, 212, 216, 0.42);");
});
it("keeps AI table scrollbars visible without OKLCH color mixing", () => {
const thumbStart = aiAssistantSource.indexOf(".ai-markdown :deep(.ai-markdown-table-wrap::-webkit-scrollbar-thumb) {");
const hoverStart = aiAssistantSource.indexOf(".ai-markdown :deep(.ai-markdown-table-wrap:hover::-webkit-scrollbar-thumb) {");
const legacyStart = aiAssistantSource.indexOf("html.dbx-legacy-webview.dark .ai-markdown", hoverStart);
const thumb = aiAssistantSource.slice(thumbStart, hoverStart);
const hover = aiAssistantSource.slice(hoverStart, legacyStart);
expect(thumbStart).toBeGreaterThan(-1);
expect(hoverStart).toBeGreaterThan(thumbStart);
expect(legacyStart).toBeGreaterThan(hoverStart);
expect(thumb.indexOf("background: rgba(82, 82, 82, 0.28);")).toBeGreaterThan(-1);
expect(thumb.indexOf("background: rgba(82, 82, 82, 0.28);")).toBeLessThan(thumb.indexOf("background: color-mix(in oklch, var(--foreground) 28%, transparent);"));
expect(hover.indexOf("background: rgba(82, 82, 82, 0.45);")).toBeGreaterThan(-1);
expect(hover.indexOf("background: rgba(82, 82, 82, 0.45);")).toBeLessThan(hover.indexOf("background: color-mix(in oklch, var(--foreground) 45%, transparent);"));
expect(aiAssistantSource).toContain("background: rgba(212, 212, 216, 0.28);");
expect(aiAssistantSource).toContain("background: rgba(212, 212, 216, 0.45);");
});
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);