From a3b09dc6c76502905185de5d30a6aa89cc5af3f5 Mon Sep 17 00:00:00 2001
From: Basit Balogun <basitbalogun10@gmail.com>
Date: Mon, 25 May 2026 23:05:02 +0100
Subject: [PATCH 1/2] fix: sticky sidebar top panel with scrollable task
 section

- Top nav icons (new task, search, inbox, skills, etc.) now sit in a
  shrink-0 flex child so they never scroll away
- Task list moved into min-h-0 flex-1 ScrollArea so it fills the
  remaining height and scrolls independently
- Tasks section header (search + filter icons) is sticky top-0 within
  the scroll area
---
 .../sidebar/components/SidebarMenu.tsx        | 155 +++++++++---------
 .../sidebar/components/TaskListView.tsx       |  20 ++-
 2 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
index 7d9b26d49..d41825d3c 100644
--- a/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -293,79 +293,88 @@ function SidebarMenuComponent() {
   }, [setEditingTaskId]);
 
   return (
-    <Box height="100%" position="relative" id="side-bar-menu">
-      <ScrollArea className="h-full overflow-y-auto overflow-x-hidden">
-        <Flex direction="column" py="2" px="2" gap="1px">
-          <Box mb="2">
-            <NewTaskItem
-              isActive={sidebarData.isHomeActive}
-              onClick={handleNewTaskClick}
-              variant="primary"
-            />
-          </Box>
-
-          <Box>
-            <SearchItem onClick={handleSearchClick} />
-          </Box>
-
-          <Box>
-            <InboxItem
-              isActive={sidebarData.isInboxActive}
-              onClick={handleInboxClick}
-              signalCount={inboxSignalCount}
-            />
-          </Box>
-
-          <Box>
-            <SkillsItem
-              isActive={sidebarData.isSkillsActive}
-              onClick={handleSkillsClick}
-            />
-          </Box>
-
-          <Box>
-            <McpServersItem
-              isActive={sidebarData.isMcpServersActive}
-              onClick={handleMcpServersClick}
-            />
-          </Box>
-
-          <Box mb="2">
-            <CommandCenterItem
-              isActive={sidebarData.isCommandCenterActive}
-              onClick={handleCommandCenterClick}
-              activeCount={commandCenterActiveCount}
-            />
-          </Box>
-
-          <Separator className="mx-2 my-2" />
-
-          {sidebarData.isLoading ? (
-            <SidebarItem
-              depth={0}
-              icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
-              label="Loading tasks..."
-              disabled
-            />
-          ) : (
-            <TaskListView
-              pinnedTasks={sidebarData.pinnedTasks}
-              flatTasks={sidebarData.flatTasks}
-              groupedTasks={sidebarData.groupedTasks}
-              activeTaskId={sidebarData.activeTaskId}
-              editingTaskId={editingTaskId}
-              onTaskClick={handleTaskClick}
-              onTaskDoubleClick={handleTaskDoubleClick}
-              onTaskContextMenu={handleTaskContextMenu}
-              onTaskArchive={handleTaskArchive}
-              onTaskTogglePin={togglePin}
-              onTaskEditSubmit={handleTaskEditSubmit}
-              onTaskEditCancel={handleTaskEditCancel}
-              hasMore={sidebarData.hasMore}
-            />
-          )}
-        </Flex>
-      </ScrollArea>
+    <Box
+      height="100%"
+      position="relative"
+      id="side-bar-menu"
+      className="flex min-h-0 flex-col"
+    >
+      <Flex direction="column" className="shrink-0 px-2 py-2" gap="1px">
+        <Box mb="2">
+          <NewTaskItem
+            isActive={sidebarData.isHomeActive}
+            onClick={handleNewTaskClick}
+            variant="primary"
+          />
+        </Box>
+
+        <Box>
+          <SearchItem onClick={handleSearchClick} />
+        </Box>
+
+        <Box>
+          <InboxItem
+            isActive={sidebarData.isInboxActive}
+            onClick={handleInboxClick}
+            signalCount={inboxSignalCount}
+          />
+        </Box>
+
+        <Box>
+          <SkillsItem
+            isActive={sidebarData.isSkillsActive}
+            onClick={handleSkillsClick}
+          />
+        </Box>
+
+        <Box>
+          <McpServersItem
+            isActive={sidebarData.isMcpServersActive}
+            onClick={handleMcpServersClick}
+          />
+        </Box>
+
+        <Box mb="2">
+          <CommandCenterItem
+            isActive={sidebarData.isCommandCenterActive}
+            onClick={handleCommandCenterClick}
+            activeCount={commandCenterActiveCount}
+          />
+        </Box>
+      </Flex>
+
+      <Separator className="mx-2 my-2 shrink-0" />
+
+      <Box className="min-h-0 flex-1">
+        <ScrollArea className="h-full overflow-y-auto overflow-x-hidden">
+          <Flex direction="column" gap="1px" px="2" pb="2">
+            {sidebarData.isLoading ? (
+              <SidebarItem
+                depth={0}
+                icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
+                label="Loading tasks..."
+                disabled
+              />
+            ) : (
+              <TaskListView
+                pinnedTasks={sidebarData.pinnedTasks}
+                flatTasks={sidebarData.flatTasks}
+                groupedTasks={sidebarData.groupedTasks}
+                activeTaskId={sidebarData.activeTaskId}
+                editingTaskId={editingTaskId}
+                onTaskClick={handleTaskClick}
+                onTaskDoubleClick={handleTaskDoubleClick}
+                onTaskContextMenu={handleTaskContextMenu}
+                onTaskArchive={handleTaskArchive}
+                onTaskTogglePin={togglePin}
+                onTaskEditSubmit={handleTaskEditSubmit}
+                onTaskEditCancel={handleTaskEditCancel}
+                hasMore={sidebarData.hasMore}
+              />
+            )}
+          </Flex>
+        </ScrollArea>
+      </Box>
     </Box>
   );
 }
diff --git a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
index b8cec1f3e..93bb4cad0 100644
--- a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
@@ -336,15 +336,17 @@ export function TaskListView({
         </>
       )}
 
-      <SectionLabel
-        label="Tasks"
-        endContent={
-          <span className="flex items-center">
-            <TaskSearchButton />
-            <TaskFilterMenu />
-          </span>
-        }
-      />
+      <div className="sticky top-0 z-10 bg-(--color-background) pt-2 pb-1">
+        <SectionLabel
+          label="Tasks"
+          endContent={
+            <span className="flex items-center">
+              <TaskSearchButton />
+              <TaskFilterMenu />
+            </span>
+          }
+        />
+      </div>
 
       {pinnedTasks.length === 0 &&
       flatTasks.length === 0 &&

From c6322024bb999f66131cf376578f87c0e68d277f Mon Sep 17 00:00:00 2001
From: Basit Balogun <basitbalogun10@gmail.com>
Date: Mon, 25 May 2026 23:33:08 +0100
Subject: [PATCH 2/2] fix: move Tasks header outside scroll area; auto-hide
 scrollbar when not needed

---
 .../sidebar/components/SidebarMenu.tsx        | 75 +++++++++++--------
 .../sidebar/components/TaskListView.tsx       | 16 +---
 2 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx b/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
index d41825d3c..0958ba63d 100644
--- a/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/SidebarMenu.tsx
@@ -14,7 +14,7 @@ import {
 import { useTasks, useUpdateTask } from "@features/tasks/hooks/useTasks";
 import { useWorkspaces } from "@features/workspace/hooks/useWorkspace";
 import { useTaskContextMenu } from "@hooks/useTaskContextMenu";
-import { ScrollArea, Separator } from "@posthog/quill";
+import { MenuLabel, Separator } from "@posthog/quill";
 import { Box, Flex } from "@radix-ui/themes";
 import type { Schemas } from "@renderer/api/generated";
 import type { Task } from "@shared/types";
@@ -35,7 +35,7 @@ import { McpServersItem } from "./items/McpServersItem";
 import { SearchItem } from "./items/SearchItem";
 import { SkillsItem } from "./items/SkillsItem";
 import { SidebarItem } from "./SidebarItem";
-import { TaskListView } from "./TaskListView";
+import { TaskFilterMenu, TaskListView, TaskSearchButton } from "./TaskListView";
 
 function SidebarMenuComponent() {
   const {
@@ -345,36 +345,47 @@ function SidebarMenuComponent() {
 
       <Separator className="mx-2 my-2 shrink-0" />
 
-      <Box className="min-h-0 flex-1">
-        <ScrollArea className="h-full overflow-y-auto overflow-x-hidden">
-          <Flex direction="column" gap="1px" px="2" pb="2">
-            {sidebarData.isLoading ? (
-              <SidebarItem
-                depth={0}
-                icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
-                label="Loading tasks..."
-                disabled
-              />
-            ) : (
-              <TaskListView
-                pinnedTasks={sidebarData.pinnedTasks}
-                flatTasks={sidebarData.flatTasks}
-                groupedTasks={sidebarData.groupedTasks}
-                activeTaskId={sidebarData.activeTaskId}
-                editingTaskId={editingTaskId}
-                onTaskClick={handleTaskClick}
-                onTaskDoubleClick={handleTaskDoubleClick}
-                onTaskContextMenu={handleTaskContextMenu}
-                onTaskArchive={handleTaskArchive}
-                onTaskTogglePin={togglePin}
-                onTaskEditSubmit={handleTaskEditSubmit}
-                onTaskEditCancel={handleTaskEditCancel}
-                hasMore={sidebarData.hasMore}
-              />
-            )}
-          </Flex>
-        </ScrollArea>
-      </Box>
+      <div className="shrink-0 px-2">
+        <MenuLabel
+          className="flex items-center justify-between pt-0 pr-0 pb-[2px]"
+          htmlFor="null"
+        >
+          Tasks
+          <span className="flex items-center">
+            <TaskSearchButton />
+            <TaskFilterMenu />
+          </span>
+        </MenuLabel>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+        <Flex direction="column" gap="1px" px="2" pb="2">
+          {sidebarData.isLoading ? (
+            <SidebarItem
+              depth={0}
+              icon={<DotsCircleSpinner size={12} className="text-gray-10" />}
+              label="Loading tasks..."
+              disabled
+            />
+          ) : (
+            <TaskListView
+              pinnedTasks={sidebarData.pinnedTasks}
+              flatTasks={sidebarData.flatTasks}
+              groupedTasks={sidebarData.groupedTasks}
+              activeTaskId={sidebarData.activeTaskId}
+              editingTaskId={editingTaskId}
+              onTaskClick={handleTaskClick}
+              onTaskDoubleClick={handleTaskDoubleClick}
+              onTaskContextMenu={handleTaskContextMenu}
+              onTaskArchive={handleTaskArchive}
+              onTaskTogglePin={togglePin}
+              onTaskEditSubmit={handleTaskEditSubmit}
+              onTaskEditCancel={handleTaskEditCancel}
+              hasMore={sidebarData.hasMore}
+            />
+          )}
+        </Flex>
+      </div>
     </Box>
   );
 }
diff --git a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
index 93bb4cad0..1e4a5a36b 100644
--- a/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
+++ b/apps/code/src/renderer/features/sidebar/components/TaskListView.tsx
@@ -134,7 +134,7 @@ function TaskRow({
   );
 }
 
-function TaskSearchButton() {
+export function TaskSearchButton() {
   const openCommandMenu = useCommandMenuStore((state) => state.open);
   return (
     <Button
@@ -148,7 +148,7 @@ function TaskSearchButton() {
   );
 }
 
-function TaskFilterMenu() {
+export function TaskFilterMenu() {
   const organizeMode = useSidebarStore((state) => state.organizeMode);
   const sortMode = useSidebarStore((state) => state.sortMode);
   const showAllUsers = useSidebarStore((state) => state.showAllUsers);
@@ -336,18 +336,6 @@ export function TaskListView({
         </>
       )}
 
-      <div className="sticky top-0 z-10 bg-(--color-background) pt-2 pb-1">
-        <SectionLabel
-          label="Tasks"
-          endContent={
-            <span className="flex items-center">
-              <TaskSearchButton />
-              <TaskFilterMenu />
-            </span>
-          }
-        />
-      </div>
-
       {pinnedTasks.length === 0 &&
       flatTasks.length === 0 &&
       groupedTasks.length === 0 ? (