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;
@@ -695,6 +709,23 @@ button,
     display: inline-block;
 }
 
+/* Seats on the bottom of the ring wear their badge underneath, because that's the
+   edge the pot isn't on. Bets sit between a seat and the pot, so on the bottom arc
+   the chip comes down onto the seat's top edge — which is exactly where this badge
+   was, and the chip is a layer above it. See render.js for the measurement. */
+.seat.seatBelowCentre .blindBadge {
+    top: auto;
+    bottom: -9px;
+}
+
+/* And the badge outranks the chips regardless, so a layout this doesn't anticipate
+   can't hide it again. Which blind a seat is posting is the one thing on that puck
+   nothing else on the felt repeats — a bet chip's amount is on the seat's own total
+   line as well. Measured across 12 table sizes: no chip loses its amount to this. */
+.blindBadge {
+    z-index: 4;
+}
+
 /* Both badges failed WCAG AA against their own gradients — measured at the worst
    stop, the small blind was 3.52:1 and the big blind 2.15:1, in 9px bold text a
    dealer is meant to read at a glance across a table.

JoshHeaps.Net/wwwroot/js/casino/holdem/betting.js

@@ -90,6 +90,28 @@ const Betting = {
         };
     },
 
+    // Does handing this seat chips also put them back in the game?
+    //
+    // At a real table those are one event, and here they were two: a busted player got
+    // their chips and stayed sat out, silently skipped hand after hand until somebody
+    // noticed and found "Deal in" in the seat menu. Nothing said so — the toast just
+    // read "Ben added $100".
+    //
+    // Not for a seat that was sat out while *holding* chips. That's a dealer who sat
+    // somebody out on purpose and is topping them up, and dealing them back in would be
+    // the tool guessing at something it wasn't told. Only a seat with no stack of its
+    // own: busted at zero, or a chair being bought into for the first time.
+    //
+    // Deliberately reads player.stack rather than stackOf(), which substitutes the
+    // table's starting stack for a seat that has none — the question here is what this
+    // seat was actually recorded as holding.
+    buyInDealsThemIn(player) {
+        if (!player || player.inHand) return false;
+        const own = player.stack;
+        const recorded = own !== null && own !== undefined && String(own).trim() !== "";
+        return !recorded || Number(own) <= this.EPSILON_CHIPS;
+    },
+
     // "bet" or "raise" — what putting more in is actually called right now.
     //
     // A wager into a pot nobody has wagered into is a bet; everything after that is a

JoshHeaps.Net/wwwroot/js/casino/holdem/main.js

@@ -140,11 +140,27 @@ document.addEventListener("DOMContentLoaded", () => {
         editSeat: index => Render.toggleSeatEditor(index),
 
         addChips: index => AddChips.open(state, index, (seatIndex, amount) => {
-            seatAction(seatIndex, `${nameOf(seatIndex)} added ${Money.format(amount)}.`, player => {
+            // Buying chips puts you back in the game — see Betting.buyInDealsThemIn.
+            const dealBackIn = Betting.buyInDealsThemIn(state.seats[seatIndex]);
+            const handRunning = !Betting.onlyBlindsIn(state) || Betting.potSoFar(state) > 0;
+
+            const message = `${nameOf(seatIndex)} added ${Money.format(amount)}` +
+                (dealBackIn
+                    ? handRunning ? " — in from the next hand." : " — dealt in."
+                    : ".");
+
+            seatAction(seatIndex, message, p => {
                 // Chips in front and cash in are different questions — the stack moves
                 // every hand, what they've handed over only moves when they buy.
-                player.stack = Money.round(Betting.stackOf(state, player) + amount);
-                player.buyIns = Money.round((Number(player.buyIns) || 0) + amount);
+                p.stack = Money.round(Betting.stackOf(state, p) + amount);
+                p.buyIns = Money.round((Number(p.buyIns) || 0) + amount);
+
+                if (dealBackIn) {
+                    p.inHand = true;
+                    // Same rule "Deal in" follows: you can't buy into a pot you haven't
+                    // been paying for, and `folded` is exactly that state for one hand.
+                    p.folded = handRunning;
+                }
             });
         }),
     };

JoshHeaps.Net/wwwroot/js/casino/holdem/render.js

@@ -171,6 +171,16 @@ const Render = {
             node.style.top = `${pos.top}%`;
             node.dataset.seatIndex = String(index);
 
+            // Which side of the seat the pot is on, which is the side its bet chip
+            // arrives from — the chip sits on the same spoke, closer in. For a seat on
+            // the top of the ring that's from below; on the bottom, from above.
+            //
+            // The blind badge has to be on the other side or the chip lands on top of
+            // it. Measured on a 390px phone: the big blind's own $2 chip covered 196 of
+            // the badge's 288 square pixels, and it sits a layer higher, so the marker
+            // telling the dealer who the big blind is was simply gone.
+            node.classList.toggle("seatBelowCentre", pos.top > 50);
+
             node.querySelector(".seatChairNumber").textContent = index + 1;
 
             const dealerChip = node.querySelector(".dealerChip");

tests/holdem/buyIn.test.js

@@ -0,0 +1,76 @@
+// Whether handing a seat chips also puts them back in the game.
+const test = require("node:test");
+const assert = require("node:assert");
+const { Betting, makeTable } = require("./load");
+
+test("a busted player who has been sat out comes back in", () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
+    state.seats[1].stack = 0;
+    Betting.beginHand(state);           // the deal sits them out
+
+    assert.equal(state.seats[1].inHand, false);
+    assert.equal(Betting.buyInDealsThemIn(state.seats[1]), true);
+});
+
+test("a chair being bought into for the first time comes in", () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    state.seats[4].name = "Eve";
+    state.seats[4].stack = null;
+
+    assert.equal(Betting.buyInDealsThemIn(state.seats[4]), true);
+});
+
+test("a seat sat out while holding chips stays out", () => {
+    // A dealer sat them out on purpose and is topping them up. Dealing them back in
+    // would be the tool guessing at something it wasn't told.
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
+    state.seats[2].inHand = false;
+
+    assert.equal(Betting.buyInDealsThemIn(state.seats[2]), false);
+});
+
+test("somebody already in the hand is left exactly where they are", () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
+    assert.equal(Betting.buyInDealsThemIn(state.seats[0]), false);
+
+    // Including a player who is in but out of chips — they're all-in, not sat out.
+    state.seats[2].stack = 0;
+    assert.equal(state.seats[2].inHand, true);
+    assert.equal(Betting.buyInDealsThemIn(state.seats[2]), false);
+});
+
+test("a blank stack field reads as nothing recorded, not as a number", () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    state.seats[3].name = "Dee";
+    state.seats[3].stack = "";
+
+    assert.equal(Betting.buyInDealsThemIn(state.seats[3]), true);
+});
+
+test("it doesn't ask the table what a missing stack would have been", () => {
+    // stackOf substitutes the table's starting stack for a seat that has none, which
+    // would make a seat with nothing recorded look like it was holding chips.
+    const state = makeTable({ seatCount: 6, seated: [0, 1], stack: 100 });
+    state.defaultStack = 500;
+    state.seats[4].name = "Eve";
+    state.seats[4].stack = null;
+
+    assert.equal(Betting.stackOf(state, state.seats[4]), 500);
+    assert.equal(Betting.buyInDealsThemIn(state.seats[4]), true);
+});
+
+test("asking doesn't change anything", () => {
+    const state = makeTable({ seatCount: 6, seated: [0, 1, 2], stack: 100 });
+    state.seats[2].stack = 0;
+    state.seats[2].inHand = false;
+    const before = JSON.stringify(state);
+
+    Betting.buyInDealsThemIn(state.seats[2]);
+
+    assert.equal(JSON.stringify(state), before);
+});
+
+test("nothing to decide about a seat that isn't there", () => {
+    assert.equal(Betting.buyInDealsThemIn(null), false);
+    assert.equal(Betting.buyInDealsThemIn(undefined), false);
+});