From e4ecd80f5f9f77d38312c3ff1622de2d5a5dfe65 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Tue, 19 May 2026 21:08:15 -0700
Subject: [PATCH] Fix sidebar scrollbar hit area (#2395)

---
 src/renderer/src/components/sidebar/SidebarHeader.tsx  | 8 ++------
 src/renderer/src/components/sidebar/SidebarNav.tsx     | 8 +-------
 src/renderer/src/components/sidebar/SidebarToolbar.tsx | 5 +----
 src/renderer/src/components/sidebar/index.tsx          | 2 +-
 4 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/renderer/src/components/sidebar/SidebarHeader.tsx b/src/renderer/src/components/sidebar/SidebarHeader.tsx
index 0ec1b96fd..dca1e84e6 100644
--- a/src/renderer/src/components/sidebar/SidebarHeader.tsx
+++ b/src/renderer/src/components/sidebar/SidebarHeader.tsx
@@ -46,9 +46,6 @@ const SORT_OPTIONS = [
 
 const isMac = navigator.userAgent.includes('Mac')
 const newWorktreeShortcutLabel = isMac ? '⌘N' : 'Ctrl+N'
-// Why: the sidebar resize handle intentionally has a wide hit target at the
-// right edge, but header actions overlapping it should remain clickable.
-const HEADER_ACTION_HIT_TARGET_CLASS = 'relative z-20'
 
 const SidebarHeader = React.memo(function SidebarHeader() {
   const [workspaceBoardOpen, setWorkspaceBoardOpen] = useState(false)
@@ -122,7 +119,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
               <Button
                 variant={workspaceBoardOpen ? 'secondary' : 'ghost'}
                 size="icon-xs"
-                className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
+                className="text-muted-foreground"
                 aria-label="Workspace board"
                 aria-pressed={workspaceBoardOpen}
                 data-workspace-board-trigger=""
@@ -145,7 +142,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
                   <Button
                     variant="ghost"
                     size="icon-xs"
-                    className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
+                    className="text-muted-foreground"
                     aria-label="View options"
                     data-workspace-board-preserve-open=""
                   >
@@ -242,7 +239,6 @@ const SidebarHeader = React.memo(function SidebarHeader() {
               <Button
                 variant="ghost"
                 size="icon-xs"
-                className={HEADER_ACTION_HIT_TARGET_CLASS}
                 onClick={() => {
                   if (!canCreateWorktree) {
                     return
diff --git a/src/renderer/src/components/sidebar/SidebarNav.tsx b/src/renderer/src/components/sidebar/SidebarNav.tsx
index ee9bb9c9c..3922b471a 100644
--- a/src/renderer/src/components/sidebar/SidebarNav.tsx
+++ b/src/renderer/src/components/sidebar/SidebarNav.tsx
@@ -15,9 +15,6 @@ import {
 } from '../../../../shared/task-providers'
 
 const isMac = typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac')
-// Why: the sidebar resize handle keeps a wide edge target, but primary nav
-// rows under that strip should remain clickable when their bounds overlap.
-const SIDEBAR_NAV_HIT_TARGET_CLASS = 'relative z-20'
 
 export function shouldShowAgentsButton(
   settings: Pick<GlobalSettings, 'experimentalActivity'> | null | undefined
@@ -163,7 +160,6 @@ const SidebarNav = React.memo(function SidebarNav() {
           disabled={!canBrowseTasks}
           aria-current={tasksActive ? 'page' : undefined}
           className={cn(
-            SIDEBAR_NAV_HIT_TARGET_CLASS,
             'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
             tasksActive
               ? 'bg-sidebar-accent text-sidebar-accent-foreground'
@@ -236,7 +232,6 @@ const SidebarNav = React.memo(function SidebarNav() {
         onClick={openAutomationsPage}
         aria-current={automationsActive ? 'page' : undefined}
         className={cn(
-          SIDEBAR_NAV_HIT_TARGET_CLASS,
           'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
           automationsActive
             ? 'bg-sidebar-accent text-sidebar-accent-foreground'
@@ -255,7 +250,6 @@ const SidebarNav = React.memo(function SidebarNav() {
           onClick={openActivityPage}
           aria-current={activityActive ? 'page' : undefined}
           className={cn(
-            SIDEBAR_NAV_HIT_TARGET_CLASS,
             'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
             activityActive
               ? 'bg-sidebar-accent text-sidebar-accent-foreground'
@@ -278,7 +272,7 @@ const SidebarNav = React.memo(function SidebarNav() {
         type="button"
         onClick={() => openModal('worktree-palette')}
         aria-label="Search worktrees and browser tabs"
-        className={`${SIDEBAR_NAV_HIT_TARGET_CLASS} group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight text-sidebar-foreground/60 transition-colors hover:bg-sidebar-foreground/8`}
+        className="group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight text-sidebar-foreground/60 transition-colors hover:bg-sidebar-foreground/8"
       >
         <Search className="size-4 shrink-0 text-sidebar-foreground/30" strokeWidth={1.75} />
         <span className="flex-1">Search</span>
diff --git a/src/renderer/src/components/sidebar/SidebarToolbar.tsx b/src/renderer/src/components/sidebar/SidebarToolbar.tsx
index 4334c0cd8..a79e3ac5d 100644
--- a/src/renderer/src/components/sidebar/SidebarToolbar.tsx
+++ b/src/renderer/src/components/sidebar/SidebarToolbar.tsx
@@ -38,9 +38,6 @@ const GITHUB_ISSUES_URL = 'https://github.com/stablyai/orca/issues/'
 const DISCORD_URL = 'https://discord.gg/fzjDKHxv8Q'
 const X_URL = 'https://x.com/orca_build'
 const DOCS_URL = 'https://www.onorca.dev/docs'
-// Why: the sidebar resize handle intentionally keeps a wide right-edge hit
-// target, but the bottom Settings action should remain clickable over it.
-const SETTINGS_ACTION_HIT_TARGET_CLASS = 'relative z-20'
 
 type SubmitIdentity = {
   githubLogin: string | null
@@ -374,7 +371,7 @@ const SidebarToolbar = React.memo(function SidebarToolbar() {
                 variant="ghost"
                 size="icon-xs"
                 onClick={openSettingsPage}
-                className={`${SETTINGS_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
+                className="text-muted-foreground"
               >
                 <Settings className="size-3.5" />
               </Button>
diff --git a/src/renderer/src/components/sidebar/index.tsx b/src/renderer/src/components/sidebar/index.tsx
index ed408dc77..95d556273 100644
--- a/src/renderer/src/components/sidebar/index.tsx
+++ b/src/renderer/src/components/sidebar/index.tsx
@@ -78,7 +78,7 @@ function Sidebar({
         {/* Resize handle */}
         <div
           data-sidebar-resize-handle=""
-          className="absolute top-0 right-0 h-full w-5 cursor-col-resize transition-colors z-10 before:absolute before:inset-y-0 before:right-0 before:w-1 before:transition-colors hover:before:bg-ring/20 active:before:bg-ring/30"
+          className="absolute top-0 right-0 z-10 h-full w-px cursor-col-resize transition-colors hover:bg-ring/20 active:bg-ring/30"
           onMouseDown={onResizeStart}
         />
       </div>