Give buttons and links the same box

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

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -212,6 +212,20 @@ button,
 }
 
 .holdemBtn {
+    /* Stated, because this class is worn by both <button> and <a> and the browser
+       does not give them the same box. Chromium's own stylesheet 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 64px on the two links — and the row
+       stretches to its tallest item, so every button became 64px too. A 46px touch
+       target was quietly costing 64px of a phone screen, twice over, because the
+       header wraps to two rows. */
+    box-sizing: border-box;
+    /* And the touch floor is stated here rather than only under a width breakpoint.
+       It used to arrive by accident — the content-box links were 64px tall and the
+       row stretched everything to match — so once the boxes agree, a landscape phone
+       (wider than the phone breakpoint, still a thumb) would have been left with 42px
+       buttons. 44px is the floor everywhere; the narrow layout still asks for 46. */
+    min-height: 44px;
     background: linear-gradient(180deg, #2e2e2e, #232323);
     color: #eee;
     border: 1px solid #3a3a3a;