Commit Graph
3 Commits
Author SHA1 Message Date
TEEKandGitHub 81934cf354 fix(web): use dedicated split breakpoint for compact tablets (#1141)
* fix(web): use dedicated split breakpoint for compact tablets

Some compact Android tablets (e.g. OPPO Pad mini) report a landscape
CSS viewport below Tailwind's `lg` (1024px) despite having enough
physical screen space, so the sessions layout fell back to a single
column. Add a dedicated `split` breakpoint at 920px and use it for the
sessions split layout and the sidebar width/resize CSS, leaving the
global `lg` breakpoint (and all other pages) untouched.

* fix(web): cap sidebar width against viewport on compact split

A persisted sidebar width (up to 600px from resizing on desktop) could
shrink the detail pane to 316px at the new 920px split breakpoint, below
the previous 1024px worst case of 420px. Cap the sidebar width at
min(var(--sidebar-w), calc(100vw - 424px)) so the detail pane keeps at
least 420px down to 920px, with no effect on desktop.

* fix(web): seed sidebar drag from rendered width

When the compact-split viewport cap renders the sidebar narrower than the
persisted width, dragging the handle to shrink it had a dead zone until
the stored width fell below the rendered width. Seed the drag from the
sidebar's rendered width so it responds immediately; unchanged on desktop
where rendered and stored widths match.
2026-07-24 10:54:21 +08:00
1cb353b7b3 fix(web): use global pointer listeners for sidebar resize handle (#497)
* fix(web): use global pointer listeners for sidebar resize handle

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.

* ci: retrigger CI (flaky AcpSdkBackend test)

* 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.

---------

Co-authored-by: huchenxi <huchenxi@lattebank.com>
2026-04-21 13:55:49 +08:00
FemoonandGitHub ef87e30727 feat(web): redesign sidebar with resizable width and 3-level hierarchy (#427) 2026-04-11 09:52:56 +08:00