Ask about the thumb, not the window width #70

2026-09-01T14:24:30-06:00

jheaps commented

2026-09-01 14:24:30 -06:00

There's a careful touch-target pass in this stylesheet — 44px fields, 44px delete buttons, a padded hit area for the rulings link. Every rule in it sits behind max-width: 700px. Stacked on #69.

A phone held sideways is 844px wide.

So none of that work applied to the device it was written for, half the time. Measured on an emulated touch device (hasTouch, isMobile, so pointer: coarse really matches) with the sidebar open — twelve controls under 44px at 844x390 and again at 915x412:

the rulings link            91x14
the dedicated-dealer box    13x13
chip-colour delete          28px wide
blinds-direction select     32px tall
five panel headers          38px

The rules are restated against pointer: coarse. The width-scoped block keeps its layout changes — one column, stacked dialogs — because those really are about how much room there is. This is only about what a thumb can hit, so it asks about the thumb.

Viewport	Controls under 44px
844x390 touch	12 → 1
915x412 touch	12 → 1
390x844 touch	6 → 1
360x640 touch	6 → 1

The one left is the bare 24x24 checkbox, whose row is 44px tall — the row is the target, which is the existing design and the only thing that works for a checkbox.

Two things were too small on every device

The panel headers — the sidebar's entire navigation — were 38px everywhere, phones included; the pass below never reached them. And the rulings link was 91x14, which misses the 24px minimum with a mouse as well as with a thumb. Controls under 24px anywhere: now zero, at every size measured.

Two traps worth recording

A <summary> only draws its disclosure triangle while it's display: list-item, so the headers get to 44px on padding rather than a flex box. And a <summary> is content-box, so min-height: 44px was added to the padding and gave 71px — the same box-model trap as the header buttons in #69, in a different tag. Both are stated in the CSS where the next person will hit them.

Validation

214 tests still passing; layout audit and contrast clean at six sizes across both touch and pointer contexts; no console errors; panels still toggle and the triangle is still there (checked, not assumed).

There's a careful touch-target pass in this stylesheet — 44px fields, 44px delete buttons, a padded hit area for the rulings link. **Every rule in it sits behind `max-width: 700px`.** Stacked on #69. A phone held sideways is 844px wide. So none of that work applied to the device it was written for, half the time. Measured on an emulated touch device (`hasTouch`, `isMobile`, so `pointer: coarse` really matches) with the sidebar open — **twelve controls under 44px** at 844x390 and again at 915x412: ``` the rulings link 91x14 the dedicated-dealer box 13x13 chip-colour delete 28px wide blinds-direction select 32px tall five panel headers 38px ``` The rules are restated against `pointer: coarse`. The width-scoped block keeps its layout changes — one column, stacked dialogs — because those really are about how much room there is. This is only about what a thumb can hit, so it asks about the thumb. | Viewport | Controls under 44px | | --- | --- | | 844x390 touch | **12 → 1** | | 915x412 touch | **12 → 1** | | 390x844 touch | **6 → 1** | | 360x640 touch | **6 → 1** | The one left is the bare 24x24 checkbox, whose row is 44px tall — the row is the target, which is the existing design and the only thing that works for a checkbox. ## Two things were too small on every device The **panel headers** — the sidebar's entire navigation — were 38px everywhere, phones included; the pass below never reached them. And the **rulings link** was 91x14, which misses the 24px minimum with a mouse as well as with a thumb. Controls under 24px anywhere: now zero, at every size measured. ## Two traps worth recording A `<summary>` only draws its disclosure triangle while it's `display: list-item`, so the headers get to 44px on padding rather than a flex box. And a `<summary>` is **content-box**, so `min-height: 44px` was *added* to the padding and gave **71px** — the same box-model trap as the header buttons in #69, in a different tag. Both are stated in the CSS where the next person will hit them. ## Validation 214 tests still passing; layout audit and contrast clean at six sizes across both touch and pointer contexts; no console errors; panels still toggle and the triangle is still there (checked, not assumed).

jheaps added 1 commit 2026-09-01 14:24:31 -06:00

Ask about the thumb, not the window width 38536a5c0c

There is a careful touch-target pass in this stylesheet -- 44px fields, 44px delete
buttons, a padded hit area for the rulings link. Every rule in it sits behind
`max-width: 700px`.

A phone held sideways is 844px wide.

So none of that work applied to the device it was written for, half the time. Measured
on an emulated touch device with the sidebar open -- twelve controls under 44px at
844x390 and again at 915x412:

  the rulings link            91x14
  the dedicated-dealer box    13x13
  chip-colour delete          28px wide
  blinds-direction select     32px tall
  five panel headers          38px

The rules are restated against `pointer: coarse`. The width-scoped block keeps its
layout changes -- one column, stacked dialogs -- because those really are about how
much room there is. This is only about what a thumb can hit, so it asks about the
thumb.

  844x390 touch   12 controls under 44px -> 1
  915x412 touch   12 -> 1
  390x844 touch    6 -> 1
  360x640 touch    6 -> 1

The one left is the bare 24x24 checkbox, whose row is 44px tall -- the row is the
target, which is the existing design and the only thing that works for a checkbox.

Two things were too small on every device, not just touch, and are fixed outright.
The panel headers -- the sidebar's entire navigation -- were 38px everywhere, phones
included; the pass below never reached them. And the rulings link was 91x14, which
misses the 24px minimum with a mouse as well as with a thumb. Under 24px anywhere is
now zero, at every size measured.

Two traps worth recording. A <summary> only draws its disclosure triangle while it is
display: list-item, so the headers get there on padding rather than a flex box. And a
<summary> is content-box, so `min-height: 44px` was *added* to the padding and gave
71px -- the same box-model trap as the header buttons one PR ago, in a different tag.
Both are stated in the CSS where the next person will hit them.

214 tests still passing; layout audit and contrast clean at six sizes across touch and
pointer contexts; no console errors; panels still toggle and the triangle is still
there.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

jheaps referenced this pull request

2026-09-01 14:40:31 -06:00

A pre-filled amount is a suggestion, so reaching for the box replaces it #71

jheaps closed this pull request

2026-09-02 09:57:51 -06:00

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#70