Fix v3 Songs A–Z rail: reliable taps, precise drag, hittable size (#653)

* Fix v3 Songs A–Z rail: reliable taps, precise drag, hittable size

Follow-up to #634. Three rail bugs reported on macOS + Windows (0.3.0,
2026-06-29 — =Scr4tch=, MajorMokoto):

- Taps often did nothing ("clicked O, nothing happened"). pointerdown
  calls setPointerCapture, after which the browser retargets the
  follow-up click to the rail container, so the click handler's
  closest('.v3-azrail-letter') resolved null and a plain tap (no
  pointermove) had no other path. Drive the jump from pointerdown
  itself; reduce the click handler to keyboard activation only
  (e.detail === 0, Enter/Space).

- A drag landed short of the release ("where you release isn't where
  you get sent"). Every letter crossed fired jumpToLetter with
  behavior:'smooth'; stacked smooth-scroll animations over the
  virtualized grid lagged and settled imprecisely. jumpToLetter now
  takes a smooth flag and scrolls instantly ('auto') while scrubbing,
  animating only discrete taps/keyboard jumps, so the grid tracks the
  finger and the release lands on the let-go letter.

- The rail was too small at 1440p and didn't scale. Letters were a
  fixed .62rem glued at right:2px (~13px-tall target). They now scale
  with the viewport (clamp(.72rem, 1.4vh, 1.05rem)), sit off the edge
  with taller/wider equal-width hit targets and a hover/active
  highlight so the scrub target is visible.

Keyboard arrow-nav and present-letter gating are unchanged. Tests:
tests/js/v3_az_rail.test.js gains pointerdown-seek, keyboard-only click
guard, and instant-vs-smooth assertions (809 JS tests; the 13
pre-existing unrelated failures are unchanged).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QbexxfTt8q2tAn436MqGWF

* fix(v3): ignore non-primary buttons on A–Z rail pointerdown (PR #653 review)

Right- or middle-clicking the A–Z rail (or a secondary multi-touch
pointer) no longer triggers a seek; only the primary tap/drag scrubs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: byrongamatos <xasiklas@gmail.com>
This commit is contained in:
ChrisBeWithYou
2026-07-02 13:59:10 +02:00
committed by GitHub
co-authored by Claude Opus 4.8 byrongamatos
parent 0d28886d46
commit 15fabb62aa
4 changed files with 85 additions and 30 deletions
+22
View File
@@ -92,3 +92,25 @@ test('the rail supports pointer drag-scrub + keyboard arrows', () => {
assert.match(src, /ArrowUp'[\s\S]*?ArrowDown'|ArrowDown'[\s\S]*?ArrowUp'/,
'arrow keys must move between present letters');
});
test('pointer taps are driven by pointerdown, not the retarget-prone click', () => {
// A tap must seek on pointerdown (pointer capture retargets the follow-up
// click to the rail, so resolving a letter from click is unreliable — taps
// would no-op, "clicked O, nothing happened").
assert.match(src, /addEventListener\('pointerdown'[\s\S]*?seekToY\(/,
'pointerdown must seek immediately so a tap lands without a move');
// The click handler must ignore pointer-driven clicks (detail >= 1) and only
// handle keyboard Enter/Space activation (synthesized click has detail === 0).
assert.match(src, /addEventListener\('click'[\s\S]*?e\.detail\s*!==\s*0/,
'the rail click handler must guard on e.detail === 0 (keyboard only)');
});
test('drag scrubs seek instantly while taps/keys seek smoothly', () => {
assert.match(src, /async function\s+jumpToLetter\s*\(\s*letter\s*,\s*smooth/,
'jumpToLetter must take a smooth flag');
assert.match(src, /behavior:\s*smooth\s*\?\s*'smooth'\s*:\s*'auto'/,
'jumpToLetter must scroll instantly during a drag, smoothly on a tap');
// pointermove scrubs with smooth=false so RELEASE lands on the let-go letter.
assert.match(src, /addEventListener\('pointermove'[\s\S]*?seekToY\([^;]*?,\s*false\)/,
'pointermove must seek with smooth=false (precise drag tracking)');
});