Bring every phone target up to size, not just the ones I happened to check #35

Closed
jheaps wants to merge 0 commits from feature/casino-holdem-touch-audit into master
Owner

Last round I measured one screen and found the smallest targets in the tool were on it. That was luck, not method — so this round I measured all of them: 64 controls at phone width, flagging anything under 44px. 23 came back.

  • The sidebar never had the touch pass the seat form got. Inputs, selects and small buttons sat at 26–30px. The buttons that delete a chip colour or a custom field were 28px wide — a bad size for something destructive.
  • The rulings link was a 14px-tall underlined word.
  • The seat form had drifted: its mobile sizing rule named five fields, and the stack field added two rounds later was not one of them, so it sat at 28px beside its 44px neighbours.

Both that rule and the new sidebar one are now written against the form and the panel rather than a list of field names, so the next field added inherits the size instead of waiting to be noticed. That is the actual fix — the 28px stack field was a symptom of enumerating selectors.

The dealer button is the one deliberate exception to the shape, not the rule. It keeps its 22px disc — it is a chip sitting on a seat, and drawing it thumb-sized would swallow the puck — but takes taps through an invisible 44px pad.

Validation (Playwright, headed)

  • Before: 23 flagged. After: 0. The final sweep measures the effective hit area by probing with elementFromPoint, so an element whose target is extended by a pad is judged on what a thumb actually hits rather than on its box.
  • The dealer chip measures 43×43 effective from a 22×22 disc, and no seat centre is stolen by it — checked across every seat — with the seat still opening on tap.
  • I first shipped that pad at 40px, measured 39×39, and raised it rather than calling it close enough.
  • Desktop is untouched: the rules are inside the existing phone breakpoint, and at 1280px the same controls still measure 28–30px as before. No page or sidebar overflow at either width. No console errors.

Branched from master; touches only holdem.css. Overlaps #34 in that file but in a different block, and #33 not at all.

Last round I measured one screen and found the smallest targets in the tool were on it. That was luck, not method — so this round I measured **all** of them: 64 controls at phone width, flagging anything under 44px. **23 came back.** - **The sidebar never had the touch pass the seat form got.** Inputs, selects and small buttons sat at 26–30px. The buttons that **delete a chip colour or a custom field were 28px wide** — a bad size for something destructive. - **The rulings link** was a 14px-tall underlined word. - **The seat form had drifted**: its mobile sizing rule named five fields, and the **stack field added two rounds later was not one of them**, so it sat at 28px beside its 44px neighbours. Both that rule and the new sidebar one are now written **against the form and the panel rather than a list of field names**, so the next field added inherits the size instead of waiting to be noticed. That is the actual fix — the 28px stack field was a symptom of enumerating selectors. **The dealer button is the one deliberate exception to the shape, not the rule.** It keeps its 22px disc — it is a chip sitting on a seat, and drawing it thumb-sized would swallow the puck — but takes taps through an invisible 44px pad. ## Validation (Playwright, headed) - **Before: 23 flagged. After: 0.** The final sweep measures the *effective* hit area by probing with `elementFromPoint`, so an element whose target is extended by a pad is judged on what a thumb actually hits rather than on its box. - **The dealer chip measures 43×43 effective from a 22×22 disc**, and **no seat centre is stolen by it** — checked across every seat — with the seat still opening on tap. - I first shipped that pad at 40px, measured **39×39**, and raised it rather than calling it close enough. - **Desktop is untouched**: the rules are inside the existing phone breakpoint, and at 1280px the same controls still measure 28–30px as before. No page or sidebar overflow at either width. No console errors. Branched from `master`; touches only `holdem.css`. Overlaps #34 in that file but in a different block, and #33 not at all.
jheaps added 1 commit 2026-09-01 00:38:51 -06:00
Last round I measured one screen and found the smallest targets in the tool were
on it. So I measured all of them: sixty-four controls at phone width, flagging
anything under 44px. Twenty-three came back.

The sidebar had never had the touch pass the seat form got — its inputs, selects
and small buttons sat at 26 to 30px, and the buttons that delete a chip colour
or a custom field were 28px wide, which is a bad size for something destructive.
The rulings link was a 14px-tall underlined word.

The seat form itself had drifted: its mobile sizing rule named five fields, and
the stack field added two rounds later wasn't one of them, so it sat at 28px
beside its 44px neighbours. Both that rule and the new sidebar one are now
written against the form and the panel rather than a list of field names, so the
next field added inherits the size instead of waiting to be noticed.

The dealer button keeps its 22px disc — it's a chip sitting on a seat, and
drawing it thumb-sized would swallow the puck — but takes taps through an
invisible 44px pad. Verified the seat underneath still gets its own taps.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheaps closed this pull request 2026-09-01 02:42:16 -06:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#35