From 76f5d615e8db0b185a65132e46d4819269c84584 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sun, 17 May 2026 23:10:48 -0700
Subject: [PATCH] Fix sidebar button hit targets near resize handle (#2224)

---
 src/renderer/src/components/sidebar/SidebarHeader.tsx | 8 ++++++--
 src/renderer/src/components/sidebar/SidebarNav.tsx    | 8 +++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/sidebar/SidebarHeader.tsx b/src/renderer/src/components/sidebar/SidebarHeader.tsx
index 11ea42d86..a4e4f4dae 100644
--- a/src/renderer/src/components/sidebar/SidebarHeader.tsx
+++ b/src/renderer/src/components/sidebar/SidebarHeader.tsx
@@ -51,6 +51,9 @@ 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)
@@ -124,7 +127,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
               <Button
                 variant={workspaceBoardOpen ? 'secondary' : 'ghost'}
                 size="icon-xs"
-                className="text-muted-foreground"
+                className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
                 aria-label="Workspace board"
                 aria-pressed={workspaceBoardOpen}
                 data-workspace-board-trigger=""
@@ -147,7 +150,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
                   <Button
                     variant="ghost"
                     size="icon-xs"
-                    className="text-muted-foreground"
+                    className={`${HEADER_ACTION_HIT_TARGET_CLASS} text-muted-foreground`}
                     aria-label="View options"
                     data-workspace-board-preserve-open=""
                   >
@@ -244,6 +247,7 @@ 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 c54377555..9d9cf3744 100644
--- a/src/renderer/src/components/sidebar/SidebarNav.tsx
+++ b/src/renderer/src/components/sidebar/SidebarNav.tsx
@@ -14,6 +14,9 @@ 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'
 
 const SidebarNav = React.memo(function SidebarNav() {
   const openTaskPage = useAppStore((s) => s.openTaskPage)
@@ -152,6 +155,7 @@ 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'
@@ -224,6 +228,7 @@ 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'
@@ -241,6 +246,7 @@ 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'
@@ -262,7 +268,7 @@ const SidebarNav = React.memo(function SidebarNav() {
         type="button"
         onClick={() => openModal('worktree-palette')}
         aria-label="Search worktrees and browser tabs"
-        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"
+        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`}
       >
         <Search className="size-4 shrink-0 text-sidebar-foreground/30" strokeWidth={1.75} />
         <span className="flex-1">Search</span>