From df1df521032b331fbc839452caafc3301179c7e7 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 5 Jul 2026 15:22:38 -0700
Subject: [PATCH] Improve sidebar resize handle drag target and visual
 indicators (#7454)

- Widen the resize handle hit target to 12px (straddling the edge) to
  make it easier to grab, centering a thin 1px visual guide line.
- Highlight the divider line on hover and active states, and shade
  the handle background during active dragging.
- Adjust the sidebar webkit scrollbar border to prevent a transparent
  gap from appearing next to the drag handle.
- Update unit tests to match the new styling and sizing classes.
---
 src/renderer/src/assets/main.css              |  4 +++-
 src/renderer/src/components/sidebar/index.tsx | 20 ++++++++++++++-----
 .../sidebar/sidebar-resize-handle.test.ts     |  5 +++--
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index c26cd144a0f..6140ed22101 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -478,7 +478,9 @@
 
 .worktree-sidebar-scrollbar::-webkit-scrollbar-thumb {
   background-color: transparent;
-  border-width: 3px 3px 3px 0;
+  /* Why: no right inset — a 3px transparent right border left a visible strip
+     beside the sidebar resize seam that read like a gap in the drag handle. */
+  border-width: 3px 0 3px 0;
 }
 
 .scrollbar-sleek-parent:hover .worktree-sidebar-scrollbar,
diff --git a/src/renderer/src/components/sidebar/index.tsx b/src/renderer/src/components/sidebar/index.tsx
index 00001b9d1a6..577eaa929ae 100644
--- a/src/renderer/src/components/sidebar/index.tsx
+++ b/src/renderer/src/components/sidebar/index.tsx
@@ -24,9 +24,12 @@ const OrcaYamlTrustDialog = lazyWithRetry(() => import('./OrcaYamlTrustDialog'))
 
 const MIN_WIDTH = 220
 const MAX_WIDTH = 500
-// Why: match the right sidebar's 4px resize target; a 1px seam is too hard to acquire.
+// Why: straddle the sidebar/terminal seam so the divider sits on the border-l
+// instead of leaving a blank strip between the hover target and the edge.
 export const WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME =
-  'absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize transition-colors hover:bg-ring/20 active:bg-ring/30'
+  'group absolute -right-1.5 top-0 z-10 flex h-full w-3 cursor-col-resize items-stretch justify-center'
+export const WORKTREE_SIDEBAR_RESIZE_HANDLE_LINE_CLASS_NAME =
+  'h-full w-px bg-transparent transition-colors group-hover:bg-ring/50 group-active:bg-ring'
 
 type SidebarProps = {
   worktreeScrollOffsetRef: React.MutableRefObject<number>
@@ -116,7 +119,7 @@ function Sidebar({
     }
   }, [closeWorkspaceBoard, sidebarOpen, workspaceBoardRenderedOpen])
 
-  const { containerRef, onResizeStart } = useSidebarResize<HTMLDivElement>({
+  const { containerRef, onResizeStart, isResizing } = useSidebarResize<HTMLDivElement>({
     isOpen: sidebarOpen,
     width: sidebarWidth,
     minWidth: MIN_WIDTH,
@@ -184,9 +187,16 @@ function Sidebar({
         {sidebarOpen && (
           <div
             data-sidebar-resize-handle=""
-            className={WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME}
+            className={cn(WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME, isResizing && 'bg-ring/10')}
             onMouseDown={onResizeStart}
-          />
+          >
+            <div
+              className={cn(
+                WORKTREE_SIDEBAR_RESIZE_HANDLE_LINE_CLASS_NAME,
+                isResizing && 'bg-ring'
+              )}
+            />
+          </div>
         )}
       </div>
 
diff --git a/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts b/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts
index 4d2b33e2fe9..9733f352da8 100644
--- a/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts
+++ b/src/renderer/src/components/sidebar/sidebar-resize-handle.test.ts
@@ -13,9 +13,10 @@ function getWorktreeSidebarScrollbarPaddingRight(): number {
 }
 
 describe('worktree sidebar resize handle', () => {
-  it('keeps the hover target as wide as the right sidebar handle', () => {
+  it('keeps a wide hit target that straddles the sidebar seam', () => {
     const classes = new Set(WORKTREE_SIDEBAR_RESIZE_HANDLE_CLASS_NAME.split(/\s+/))
-    expect(classes.has('w-1')).toBe(true)
+    expect(classes.has('w-3')).toBe(true)
+    expect(classes.has('-right-1.5')).toBe(true)
     expect(classes.has('w-px')).toBe(false)
   })