Give buttons and links the same box #69

2026-09-01T14:14:28-06:00

jheaps commented

2026-09-01 14:14:28 -06:00

The header on a portrait phone was 227px — a quarter of the screen — before the table started, and at 360x640 the bottom of the table sat 16px behind the action bar with the gesture hint off screen entirely. Stacked on #68.

Chasing where the pixels went turned up something better than a tight header.

.holdemBtn is worn by three <button>s and two <a>s. The class never stated a box model, and the browser doesn't give those two tags the same one: Chromium makes a button border-box and leaves a link content-box. So min-height: 46px on the header row came out as 46px on the buttons and 46 + 16 padding + 2 border = 64px on the links — and a flex row is as tall as its tallest item, so all five became 64px.

A 46px touch target was costing 64px of screen, twice over, because the header wraps to two rows on a phone.

Viewport	Header	Buttons
390x844	227 → 191	64 → 46
412x915	227 → 191
430x932	227 → 191
360x640	173 → 137		table clearance −16px → +20px — the felt now clears the action bar instead of running under it

The half I wasn't looking for

The 46px floor only exists under the 700px breakpoint, and the accidental stretch was the only reason anything above it was big enough to press. Once the boxes agree, a landscape phone — wider than the breakpoint, still a thumb — would have been left with 42px buttons. So the 44px floor is now stated on the class itself:

Viewport	`.holdemBtn` under 44px
844x390	13 → 0
915x412	13 → 0
1280x900	13 → 0

That's every button on the page, not just the header: the panel buttons, the pot wizard, the confirm dialogs.

What it costs

844x390 loses 2px of table clearance (−5 → −7) because its header grows with the buttons. That size already has the bottom seat behind the bar (#63), and 13 unpressable controls was the worse of the two problems.

Validation

Baseline measured by stashing the change and re-serving, so the before/after is the same instrument on the same build. 214 tests still passing; layout audit and contrast clean at 9 sizes; no console errors; every header button still hit-testable at 121x46 and 112x46.

The header on a portrait phone was **227px — a quarter of the screen** — before the table started, and at 360x640 the bottom of the table sat 16px behind the action bar with the gesture hint off screen entirely. Stacked on #68. Chasing where the pixels went turned up something better than a tight header. `.holdemBtn` is worn by three `<button>`s and two `<a>`s. **The class never stated a box model, and the browser doesn't give those two tags the same one**: Chromium makes a button `border-box` and leaves a link `content-box`. So `min-height: 46px` on the header row came out as 46px on the buttons and 46 + 16 padding + 2 border = **64px on the links** — and a flex row is as tall as its tallest item, so all five became 64px. A 46px touch target was costing 64px of screen, twice over, because the header wraps to two rows on a phone. | Viewport | Header | Buttons | | | --- | --- | --- | --- | | 390x844 | 227 → **191** | 64 → **46** | | | 412x915 | 227 → **191** | | | | 430x932 | 227 → **191** | | | | 360x640 | 173 → **137** | | table clearance **−16px → +20px** — the felt now clears the action bar instead of running under it | ## The half I wasn't looking for The 46px floor only exists under the 700px breakpoint, and **the accidental stretch was the only reason anything above it was big enough to press**. Once the boxes agree, a landscape phone — wider than the breakpoint, still a thumb — would have been left with 42px buttons. So the 44px floor is now stated on the class itself: | Viewport | `.holdemBtn` under 44px | | --- | --- | | 844x390 | **13 → 0** | | 915x412 | **13 → 0** | | 1280x900 | **13 → 0** | That's every button on the page, not just the header: the panel buttons, the pot wizard, the confirm dialogs. ## What it costs 844x390 loses 2px of table clearance (−5 → −7) because its header grows with the buttons. That size already has the bottom seat behind the bar (#63), and 13 unpressable controls was the worse of the two problems. ## Validation Baseline measured by stashing the change and re-serving, so the before/after is the same instrument on the same build. 214 tests still passing; layout audit and contrast clean at 9 sizes; no console errors; every header button still hit-testable at 121x46 and 112x46.

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

Give buttons and links the same box 286a924fe4

The header on a portrait phone was 227px -- a quarter of the screen -- before the
table started, and at 360x640 the bottom of the table sat 16px behind the action bar
with the gesture hint off screen entirely.

Chasing where the pixels went turned up something better than a tight header.

.holdemBtn is worn by three <button>s and two <a>s. The class never stated a box
model, and the browser does not give those two tags the same one: Chromium makes a
button border-box and leaves a link content-box. So `min-height: 46px` on the header
row came out as 46px on the buttons and 46 + 16 padding + 2 border = 64px on the
links -- and a flex row is as tall as its tallest item, so all five became 64px.

A 46px touch target was costing 64px of screen, twice over, because the header wraps
to two rows on a phone.

  390x844   header 227 -> 191   buttons 64 -> 46
  412x915   header 227 -> 191
  430x932   header 227 -> 191
  360x640   header 173 -> 137   table clearance -16px -> +20px, so the felt now
                                clears the action bar instead of running under it

The other half is the one I did not go looking for. The 46px floor only exists under
the 700px breakpoint, and the accidental stretch was the only reason anything above
it was big enough to press. Once the boxes agree, a landscape phone -- wider than the
breakpoint, still a thumb -- would have been left with 42px buttons. So the 44px
floor is stated on the class itself. Measured across the page:

  844x390   13 .holdemBtn under 44px -> 0
  915x412   13 -> 0
  1280x900  13 -> 0

That is every button on the page, not just the header: the panel buttons, the pot
wizard, the confirm dialogs.

What it costs: 844x390 loses 2px of table clearance, -5 to -7, because its header
grows with the buttons. That size already has the bottom seat behind the bar (#63),
and 13 unpressable controls was the worse of the two problems.

214 tests still passing; layout audit and contrast clean at 9 sizes; no console
errors; every header button still hit-testable at 46x121 and 46x112.

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:24:30 -06:00

Ask about the thumb, not the window width #70

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#69