From 67623d848b87d6f5db80f8204c5a4ebe3678481f Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sun, 3 May 2026 10:24:16 +0200
Subject: [PATCH] fix(layout): keep resize handles above panes

---
 src/components/ResizeHandle.test.tsx | 6 ++++++
 src/components/ResizeHandle.tsx      | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/ResizeHandle.test.tsx b/src/components/ResizeHandle.test.tsx
index 293ac23d..923c161f 100644
--- a/src/components/ResizeHandle.test.tsx
+++ b/src/components/ResizeHandle.test.tsx
@@ -28,6 +28,12 @@ describe('ResizeHandle', () => {
     expect(handle.style.cursor || handle.className).toBeTruthy()
   })
 
+  it('stacks above z-indexed panel surfaces', () => {
+    const { container } = render(<ResizeHandle onResize={vi.fn()} />)
+    const handle = container.firstChild as HTMLElement
+    expect(handle.className).toContain('z-30')
+  })
+
   it('calls onResize with delta during drag', () => {
     const onResize = vi.fn()
     const { container } = render(<ResizeHandle onResize={onResize} />)
diff --git a/src/components/ResizeHandle.tsx b/src/components/ResizeHandle.tsx
index c3984b2e..2b93679f 100644
--- a/src/components/ResizeHandle.tsx
+++ b/src/components/ResizeHandle.tsx
@@ -67,7 +67,7 @@ export function ResizeHandle({ onResize }: ResizeHandleProps) {
 
   return (
     <div
-      className="relative z-10 -ml-1 w-1 shrink-0 self-stretch cursor-col-resize bg-transparent transition-colors hover:bg-[var(--border)]"
+      className="relative z-30 -ml-1 w-1 shrink-0 self-stretch cursor-col-resize bg-transparent transition-colors hover:bg-[var(--border)]"
       onMouseDown={handleMouseDown}
     />
   )