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

@@ -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,

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>
 

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)
   })