From d2e77a45ddf06b754c1766c81dd0dcd7ca8ad176 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Sun, 16 Aug 2026 15:26:30 +0800
Subject: [PATCH] fix(sql-files): prevent sticky folder header bleed-through

---
 apps/desktop/src/components/layout/SqlFilePanel.vue       | 4 ++--
 .../src/components/layout/__tests__/SqlFilePanel.spec.ts  | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/layout/SqlFilePanel.vue b/apps/desktop/src/components/layout/SqlFilePanel.vue
index e8d924f5bd..1fafecf81e 100644
--- a/apps/desktop/src/components/layout/SqlFilePanel.vue
+++ b/apps/desktop/src/components/layout/SqlFilePanel.vue
@@ -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 };
diff --git a/apps/desktop/src/components/layout/__tests__/SqlFilePanel.spec.ts b/apps/desktop/src/components/layout/__tests__/SqlFilePanel.spec.ts
index db80fbcfce..e270d0db95 100644
--- a/apps/desktop/src/components/layout/__tests__/SqlFilePanel.spec.ts
+++ b/apps/desktop/src/components/layout/__tests__/SqlFilePanel.spec.ts
@@ -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");
+  });
+});