fix(sql-files): prevent sticky folder header bleed-through

This commit is contained in:
zipg authored and GitHub committed 2026-08-16 15:26:30 +08:00
1 parent 4660a11f25
commit d2e77a45dd
2 files changed
+10 -2

No files matched your search

@@ -455,8 +455,8 @@ function clearContextTarget() {
<div v-for="(folder, fi) in folders" :key="folder.path" class="border-b last:border-b-0">
<div
data-sql-file-row="true"
class="flex cursor-default items-center gap-1 px-2 py-1.5 text-[11px] font-medium text-muted-foreground bg-muted/10 sticky top-0 select-none"
:class="isPathHighlighted(folder.path) ? 'bg-accent text-accent-foreground' : 'hover:bg-accent/40'"
class="flex cursor-default items-center gap-1 px-2 py-1.5 text-[11px] font-medium text-muted-foreground bg-[color-mix(in_oklab,var(--muted)_10%,var(--background))] sticky top-0 select-none"
:class="isPathHighlighted(folder.path) ? 'bg-accent text-accent-foreground' : 'hover:bg-[color-mix(in_oklab,var(--accent)_40%,var(--background))]'"
@click.stop="handlePathClick(folder.path, 'folderHeader', $event, () => toggleFolderCollapse(folder))"
@contextmenu.capture="
contextTarget = { kind: 'folderHeader', folderPath: folder.path };
@@ -22,3 +22,11 @@ describe("SqlFilePanel selection", () => {
expect(panelSource).toContain('data-sql-file-row="true"');
});
});
describe("SqlFilePanel folder headers", () => {
it("keeps sticky folder headers opaque while the file list scrolls", () => {
expect(panelSource).toContain("bg-[color-mix(in_oklab,var(--muted)_10%,var(--background))] sticky top-0");
expect(panelSource).toContain("hover:bg-[color-mix(in_oklab,var(--accent)_40%,var(--background))]");
expect(panelSource).not.toContain("bg-muted/10 sticky top-0");
});
});