From d8e28cb2008c263f25de3917f531e5f3cc31fd16 Mon Sep 17 00:00:00 2001 From: huchenxi Date: Mon, 20 Apr 2026 01:09:34 +0800 Subject: [PATCH 1/3] fix(web): use global pointer listeners for sidebar resize handle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The current implementation attaches pointermove/pointerup to the resize handle element via setPointerCapture. When the cursor moves fast enough to leave the narrow 4px handle, the browser may not deliver subsequent pointer events to the element, causing: - Cursor stuck as col-resize even after releasing the mouse - Sidebar stops tracking the pointer, requiring a page reload Switch to document-level pointermove/pointerup/pointercancel listeners that are added on drag start and cleaned up on drag end. This guarantees events are captured regardless of cursor position. Also removes onPointerMove and onPointerUp from the hook's return value (and the JSX props in router.tsx) since they are no longer needed — the hook manages everything internally via useEffect. --- web/src/hooks/useSidebarResize.ts | 28 +++++++++++++++++++--------- web/src/router.tsx | 2 -- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/web/src/hooks/useSidebarResize.ts b/web/src/hooks/useSidebarResize.ts index 999e92982..e896a10ad 100644 --- a/web/src/hooks/useSidebarResize.ts +++ b/web/src/hooks/useSidebarResize.ts @@ -29,18 +29,28 @@ export function useSidebarResize() { startXRef.current = e.clientX startWidthRef.current = width setIsDragging(true) - ;(e.target as HTMLElement).setPointerCapture(e.pointerId) }, [width]) - const onPointerMove = useCallback((e: React.PointerEvent) => { + // Global listeners ensure pointerup is always captured even if cursor leaves the handle + useEffect(() => { if (!isDragging) return - const delta = e.clientX - startXRef.current - setWidth(clamp(startWidthRef.current + delta)) - }, [isDragging]) - const onPointerUp = useCallback(() => { - if (!isDragging) return - setIsDragging(false) + const onMove = (e: PointerEvent) => { + const delta = e.clientX - startXRef.current + setWidth(clamp(startWidthRef.current + delta)) + } + + const onUp = () => setIsDragging(false) + + document.addEventListener('pointermove', onMove) + document.addEventListener('pointerup', onUp) + document.addEventListener('pointercancel', onUp) + + return () => { + document.removeEventListener('pointermove', onMove) + document.removeEventListener('pointerup', onUp) + document.removeEventListener('pointercancel', onUp) + } }, [isDragging]) // Persist width to localStorage when drag ends @@ -65,5 +75,5 @@ export function useSidebarResize() { } }, [isDragging]) - return { width, isDragging, onPointerDown, onPointerMove, onPointerUp } + return { width, isDragging, onPointerDown } } diff --git a/web/src/router.tsx b/web/src/router.tsx index 2680d2680..0c980e0b8 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -191,8 +191,6 @@ function SessionsPage() { className="sidebar-resize-handle hidden lg:block shrink-0" data-dragging={sidebar.isDragging || undefined} onPointerDown={sidebar.onPointerDown} - onPointerMove={sidebar.onPointerMove} - onPointerUp={sidebar.onPointerUp} />
From f9cd3fbf78d417eb728ce00196a31a096e83de79 Mon Sep 17 00:00:00 2001 From: huchenxi Date: Mon, 20 Apr 2026 01:13:57 +0800 Subject: [PATCH 2/3] ci: retrigger CI (flaky AcpSdkBackend test) From e610d0b9a2925f4f0731dda6a06379416c55297d Mon Sep 17 00:00:00 2001 From: huchenxi Date: Mon, 20 Apr 2026 01:46:14 +0800 Subject: [PATCH 3/3] fix: scope drag listeners to the initiating pointer ID Address review feedback: filter pointermove/pointerup/pointercancel by the pointer that started the drag, so a second finger or stylus cannot interfere with the resize. --- web/src/hooks/useSidebarResize.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/web/src/hooks/useSidebarResize.ts b/web/src/hooks/useSidebarResize.ts index e896a10ad..4606ba5be 100644 --- a/web/src/hooks/useSidebarResize.ts +++ b/web/src/hooks/useSidebarResize.ts @@ -23,9 +23,11 @@ export function useSidebarResize() { const [isDragging, setIsDragging] = useState(false) const startXRef = useRef(0) const startWidthRef = useRef(0) + const activePointerIdRef = useRef(null) const onPointerDown = useCallback((e: React.PointerEvent) => { e.preventDefault() + activePointerIdRef.current = e.pointerId startXRef.current = e.clientX startWidthRef.current = width setIsDragging(true) @@ -36,11 +38,16 @@ export function useSidebarResize() { if (!isDragging) return const onMove = (e: PointerEvent) => { + if (e.pointerId !== activePointerIdRef.current) return const delta = e.clientX - startXRef.current setWidth(clamp(startWidthRef.current + delta)) } - const onUp = () => setIsDragging(false) + const onUp = (e: PointerEvent) => { + if (e.pointerId !== activePointerIdRef.current) return + activePointerIdRef.current = null + setIsDragging(false) + } document.addEventListener('pointermove', onMove) document.addEventListener('pointerup', onUp)