UI: widen the edge-swipe-back activation band
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 40s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 58s

Replace the very-narrow 24px edge-swipe trigger with a left band of ~20% of the
viewport width (EDGE_FRACTION) so the back-swipe is easy to reach, keeping the
simple instant-navigate behaviour (the route slide plays the animation). A
hit-test keeps the wider band clear of the rack, a draggable pending tile, a
zoomed-in board and text inputs, so it never hijacks those drags.

Test: e2e (Chromium+WebKit) — the band swipe returns to the lobby; a swipe
starting on the rack does not navigate.
This commit is contained in:
Ilia Denisov
2026-06-11 17:13:24 +02:00
parent 7b85f4bd68
commit fbd67c085c
2 changed files with 63 additions and 5 deletions
+11 -5
View File
@@ -33,13 +33,19 @@
// true to bring it back.
const SHOW_AD_BANNER = false;
// Edge-swipe back: a left-edge rightward drag returns to `back`, the standard
// mobile gesture. Listened at the window in the CAPTURE phase so the board's own pointer
// handlers (which capture/stop the event) can never swallow it; armed only from the very
// left edge (<=24px), touch/pen only, so it never competes with the board's gestures.
// Edge-swipe back: a rightward drag begun in the left band returns to `back`, the standard
// mobile gesture (instant on release — the route slide plays the animation). Listened at the
// window in the CAPTURE phase so the board's own pointer handlers (which capture/stop the
// event) can never swallow it; touch/pen only. The band is a fraction of the viewport width
// (EDGE_FRACTION — widen/narrow there). A hit-test keeps the wider band clear of the gestures
// it would otherwise hijack: the rack (tile lift/reorder), a draggable pending tile, a
// zoomed-in board (it pans), and text inputs.
const EDGE_FRACTION = 0.2;
const SWIPE_SKIP = '[data-rack], .cell.pending, .viewport.zoomed, input, textarea, select';
$effect(() => {
function onDown(e: PointerEvent) {
if (!back || e.pointerType === 'mouse' || e.clientX > 24) return;
if (!back || e.pointerType === 'mouse' || e.clientX > window.innerWidth * EDGE_FRACTION) return;
if (document.elementFromPoint(e.clientX, e.clientY)?.closest(SWIPE_SKIP)) return;
const x0 = e.clientX;
const y0 = e.clientY;
const onUp = (ev: PointerEvent) => {