Skip to content

fix(studio): widen FlatSlider's click/drag hit area vertically#2142

Open
vanceingalls wants to merge 1 commit into
studio-flat-11-expand-collapse-animationfrom
studio-flat-12-slider-hit-area
Open

fix(studio): widen FlatSlider's click/drag hit area vertically#2142
vanceingalls wants to merge 1 commit into
studio-flat-11-expand-collapse-animationfrom
studio-flat-12-slider-hit-area

Conversation

@vanceingalls

@vanceingalls vanceingalls commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

What

Twelfth PR in the flat inspector stack (see #2120 for the foundation and full stack list). Widens FlatSlider's click/drag hit area from 2px (matching the thin visible line) to 20px, without changing anything about how the slider looks.

Stack: #2120 → ... → #2136#2142 (this).

Why

Requested directly after using the redesigned inspector live — the slider's clickable/draggable region was exactly as tall as its thin visual line, making it easy to miss.

How

  • The visible 2px line is now a decorative child, vertically centered inside a taller (20px) wrapping element.
  • The wrapping element carries the role, aria-* attributes, onPointerDown handler, and cursor styling that used to live on the thin line itself.
  • The click-ratio math only reads left/width from the target element's bounding rect (never height), so click-position accuracy is completely unaffected by the height change.
  • Knob and center-tick positioning (top-1/2 -translate-y-1/2) already centered relative to the parent's height, so they needed no changes to stay correctly aligned.

Test plan

  • Existing click-accuracy test passes unmodified (same rect-mocking technique, still asserts exact committed values).
  • New test asserts a pointerdown near the edge of the widened hit box (not the center) still commits the correct value — this is the specific behavior being fixed.
  • Verified live in the browser: measured the actual rendered hit area (20px) vs. visible line (2px), then dispatched real pointer events at both the top and bottom edges of the widened area and confirmed the committed value changed correctly each time (previously, only the 2px center would have registered).
  • Full monorepo suite green (1582 tests, 0 failures); oxlint/oxfmt/fallow clean.
  • Unit tests added/updated
  • Manual testing performed
  • Documentation updated (not applicable — internal Studio UI behind an off-by-default flag)

vanceingalls commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator Author

@miga-heygen miga-heygen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed as part of the 15-PR edit-panel redesign stack. Full stack review posted on #2120. No blockers on this PR. — Miga

The track's visible line was only 2px tall, and pointerdown was bound
directly to that thin element, making it hard to grab. The hit area is
now 20px tall (a wrapping div) with the visible line rendered as a
thin decorative child, centered inside it — the ratio math only reads
left/width so click accuracy is unaffected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

@miguel-heygen miguel-heygen left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Final current-head pass: a88b530. Reviewed the stack boundaries and current diff against the flat-inspector contracts; required checks have no failures/pending checks and no unresolved review threads remain. No new drift found; residual notes are non-blocking.

@vanceingalls vanceingalls force-pushed the studio-flat-12-slider-hit-area branch from a88b530 to fd1fb17 Compare July 11, 2026 01:34
@vanceingalls vanceingalls force-pushed the studio-flat-11-expand-collapse-animation branch from 030243d to fca1d7d Compare July 11, 2026 01:34

@miguel-heygen miguel-heygen left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Superseding earlier approval: the latest max-review pass found confirmed correctness issues in this flat-inspector stack (identity/selector-index state, hide-all write races, timing inference, slider pointer/keyboard/reset semantics, and duplicate React keys). Hold merge and require fixes plus re-review on the current stack head.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants