[Bug] Sidebar resize: cursor gets stuck as col-resize when dragging fast

[GeT-LeFt]

Description

The sidebar resize handle uses setPointerCapture on a 4px-wide element. When dragging quickly, the cursor can escape the handle area, causing pointer events to stop being delivered to the element.

Expected behavior

Dragging the sidebar resize handle should work reliably regardless of cursor speed, and releasing the mouse button should always end the drag state.

Actual behavior

1. Cursor stuck as col-resize after releasing the mouse button outside the handle
2. Sidebar width stops tracking the pointer mid-drag
3. Requires a page reload to recover

Steps to reproduce

1. Open a session with the sidebar visible (desktop layout)
2. Grab the resize handle and drag quickly to the left or right
3. Move the cursor fast enough to leave the 4px handle area
4. Release the mouse button — cursor remains stuck as col-resize

Root cause

setPointerCapture on narrow elements is unreliable across browsers, especially on Linux/Wayland and touch devices. The pointermove and pointerup handlers are attached to the element via React props, so they stop firing when the browser loses pointer capture.

Fix

PR #497 replaces element-level pointer capture with document-level pointermove/pointerup/pointercancel listeners managed via useEffect.

[github-actions]

Thanks for the report. I checked the current web code, and the issue looks valid from the implementation.

The resize logic currently starts dragging with setPointerCapture() on the handle element, and the drag/update/end handlers are wired on that same handle element. The handle is also only 4px wide. If the drag-end path is missed, the hook keeps isDragging true and the body cursor stays col-resize until the page state is reset.

I could verify these points in the codebase:

Relevant code:

• web/src/hooks/useSidebarResize.ts:27 - drag starts in onPointerDown
• web/src/hooks/useSidebarResize.ts:32 - calls setPointerCapture(e.pointerId) on the event target
• web/src/hooks/useSidebarResize.ts:35 - width updates only in onPointerMove from the hook
• web/src/hooks/useSidebarResize.ts:41 - drag ends only in onPointerUp by setting isDragging back to false
• web/src/hooks/useSidebarResize.ts:55 - while dragging, document.body.style.cursor = 'col-resize'
• web/src/hooks/useSidebarResize.ts:58 - cursor reset depends on drag state being cleared
• web/src/router.tsx:190 - resize handle element in the layout
• web/src/router.tsx:193 - onPointerDown attached to the handle
• web/src/router.tsx:194 - onPointerMove attached to the handle
• web/src/router.tsx:195 - onPointerUp attached to the handle
• web/src/index.css:185 - .sidebar-resize-handle style block
• web/src/index.css:186 - handle width is 4px
• web/src/index.css:187 - handle cursor is col-resize

I did not find document-level pointermove / pointerup / pointercancel listener management in the current sidebar resize hook.

---

HAPI Bot