From c404008072b88fd556660f55f954a0fbfc8e960b Mon Sep 17 00:00:00 2001
From: Ananovo <techotaku39@outlook.com>
Date: Wed, 29 Jul 2026 19:55:56 +0800
Subject: [PATCH] fix(web): keep sticky workspace headers opaque and aligned
 (#1234)

---
 .../SessionList.directory-action.test.tsx     | 37 +++++++++++++++++++
 web/src/components/SessionList.tsx            |  6 +--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/web/src/components/SessionList.directory-action.test.tsx b/web/src/components/SessionList.directory-action.test.tsx
index caf27e49..fdb23635 100644
--- a/web/src/components/SessionList.directory-action.test.tsx
+++ b/web/src/components/SessionList.directory-action.test.tsx
@@ -88,6 +88,43 @@ describe('SessionList directory action', () => {
         })
     })
 
+    it('keeps the sticky project header opaque and aligned with the list viewport', () => {
+        const session = makeSession({
+            id: 'session-1',
+            updatedAt: Date.now(),
+            metadata: {
+                path: '/home/ubuntu',
+                name: 'Greeting',
+                flavor: 'codex',
+            }
+        })
+
+        renderWithProviders(
+            <SessionList
+                sessions={[session]}
+                selectedSessionId={null}
+                onSelect={vi.fn()}
+                onNewSession={vi.fn()}
+                onRefresh={vi.fn()}
+                isLoading={false}
+                renderHeader={false}
+                api={null}
+            />
+        )
+
+        const projectHeader = screen.getByTitle('/home/ubuntu')
+        expect(projectHeader).toHaveClass('bg-[var(--app-bg)]')
+        expect(projectHeader).toHaveClass('hover:bg-[var(--app-secondary-bg)]')
+        expect(projectHeader).not.toHaveClass('hover:bg-[var(--app-subtle-bg)]')
+
+        const listContent = projectHeader.parentElement?.parentElement
+        expect(listContent).not.toHaveClass('pt-1')
+
+        const searchInput = screen.getByPlaceholderText(/Search sessions/)
+        const searchWrapper = searchInput.parentElement?.parentElement
+        expect(searchWrapper).toHaveClass('pb-1')
+    })
+
     it('hides the directory action for sessions without path metadata', () => {
         renderWithProviders(
             <SessionList
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 8786586d..074306a3 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -677,7 +677,7 @@ function SessionListSearch(props: {
     const [datePickerOpen, setDatePickerOpen] = useState(false)
     const hasDateRange = Boolean(props.customStart && props.customEnd)
     return (
-        <div className="px-2 pb-2">
+        <div className="px-2 pb-1">
             <div className="relative min-w-0">
                 <div className="pointer-events-none absolute inset-y-0 left-2.5 flex items-center text-[var(--app-hint)]">
                     <SearchIcon className="h-3.5 w-3.5" />
@@ -1281,7 +1281,7 @@ export function SessionList(props: {
             </div>
 
             <div className="app-scroll-y session-list-scrollbar-left min-h-0 flex-1">
-            <div className="mx-auto flex w-full max-w-content flex-col gap-1 pl-1.5 pr-2 pt-1 pb-2">
+            <div className="mx-auto flex w-full max-w-content flex-col gap-1 pl-1.5 pr-2 pb-2">
                 {groups.map((group) => {
                     const isCollapsed = isGroupCollapsed(group)
                     const visibleGroupSessions = getVisibleGroupSessions(group)
@@ -1297,7 +1297,7 @@ export function SessionList(props: {
                     return (
                         <div key={group.key}>
                             <div
-                                className="group/project sticky top-0 z-10 flex items-center gap-2 bg-[var(--app-bg)] py-1.5 pl-2 pr-2 text-left rounded-lg transition-colors hover:bg-[var(--app-subtle-bg)] cursor-pointer min-w-0 w-full select-none"
+                                className="group/project sticky top-0 z-10 flex items-center gap-2 bg-[var(--app-bg)] py-1.5 pl-2 pr-2 text-left rounded-lg transition-colors hover:bg-[var(--app-secondary-bg)] cursor-pointer min-w-0 w-full select-none"
                                 onClick={() => toggleGroup(group.key, isCollapsed)}
                                 title={group.directory}
                             >