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

Every amount box in this tool opens pre-filled: the raise pad offers the minimum, Add
chips offers a buy-in, the seat editor offers the stack a player already has. A dealer
taps one because they want a different number -- and a tap puts the caret after the
suggestion rather than over it.

Driven on an emulated phone:

  raise pad shows 4      tap, type "60"    -> 460
  add chips shows 200    tap, type "50"    -> 20050
  seat stack shows 200   tap, type "175"   -> 200175

The raise pad is the most time-critical control in the tool, and 460 is a number the
dealer never said. The all-in warning happens to catch that one against a $200 stack;
against a deeper stack it is simply accepted, and the pot is wrong from then on.

Number boxes now select what is in them when they take focus, so the first digit
typed replaces the suggestion.

  raise pad     4 -> "60"
  add chips   200 -> "50"
  seat stack  200 -> "175"
  a name      Cal -> "CalX"

That last line is the point of the rule. Only number boxes: type=number, or the
type=text/inputmode=decimal pair the raise pad uses to get a keypad without spinner
arrows. A name or a note is a thing you edit, and selecting all of it on focus would
be the same mistake pointing the other way.

Delegated from the document rather than wired per field. The raise pad, the add-chips
sheet and the seat editor all rebuild their inputs on every render, and a box added
later should not have to remember to ask for this.

The select is deferred a tick. Doing it inside the focus handler loses the race with
the browser placing its own caret, and the selection collapses again the moment the
tap completes.

10 tests (224 total) on the predicate, including the ones that must stay false --
name, note, colour swatch, checkbox, select, and an input with no type stated.

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.
@@ -982,9 +1013,24 @@ button,
     text-align: center;
 }
 
+/* A bare checkbox ships at 13x13, which misses the 24px minimum with a mouse as well
+   as with a thumb. The row around it is the real target on touch, but the box itself
+   should be findable on any device. */
+#dedicatedDealerToggle {
+    width: 24px;
+    height: 24px;
+}
+
 .linkBtn {
     background: none;
     border: none;
+    /* An underlined word was a 91x14 target, which misses the 24px minimum with a
+       mouse as well as with a thumb. The coarse-pointer block takes it to 44; this is
+       the floor everywhere else, and it changes nothing about how it looks. */
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 24px;
     padding: 0;
     color: #d8b46a;
     font-family: inherit;
@@ -1439,7 +1485,16 @@ button,
 
 .sidebarPanel summary {
     cursor: pointer;
-    padding: 0.7rem 0;
+    /* These headers are the sidebar's whole navigation and were 38px tall on every
+       device, phones included — the touch pass further down never reached them.
+       Padding rather than a flex box with min-height, because a <summary> only draws
+       its disclosure triangle while it is display: list-item. */
+    padding: 0.85rem 0;
+    /* A <summary> is content-box, so min-height would have been *added* to the padding
+       — measured at 71px before this line went in. Same trap the header buttons were
+       in, one file over. */
+    box-sizing: border-box;
+    min-height: 44px;
     font-size: 0.9rem;
     color: #eee;
     letter-spacing: 0.03em;
@@ -3154,3 +3209,66 @@ textarea:focus-visible {
     font-size: 0.72rem;
     color: #9a9a9a;
 }
+
+/* ---------- Touch targets on a wide touch screen ----------
+
+   Every touch-target rule in this file sits behind `max-width: 700px`, and width was
+   never the question. A phone held sideways is 844px wide, so none of that work
+   applied to it. Measured on an emulated touch device at 844x390, with the sidebar
+   panels open: twelve controls under 44px, including the rulings link at 91x14 and
+   the dedicated-dealer checkbox at 13x13.
+
+   Restated here against the pointer instead of the viewport. 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. */
+@media (pointer: coarse) {
+    .panelBody input:not([type="checkbox"]):not([type="color"]),
+    .subPanelBody input:not([type="checkbox"]):not([type="color"]),
+    .panelBody select {
+        font-size: 16px;
+        min-height: 44px;
+        padding: 0.4rem 0.6rem;
+    }
+
+    .panelBody .holdemBtnSmall,
+    .handHistoryActions .holdemBtn,
+    .toastAction {
+        min-height: 44px;
+    }
+
+    /* Destructive and tiny is the worst combination: these delete a chip colour or a
+       custom field, and are 28px wide. */
+    .removeChipColorBtn,
+    .removeFieldBtn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+
+    /* flex-shrink would take a stated width straight back off again. */
+    .chipColorInput {
+        flex: none;
+        width: 44px;
+        height: 44px;
+    }
+
+    /* A bare checkbox can't grow into a target, but the row it sits in can — the
+       label is what a tap actually lands on. */
+    .panelBody .fieldRow {
+        min-height: 44px;
+    }
+
+    #dedicatedDealerToggle {
+        width: 24px;
+        height: 24px;
+    }
+
+    /* An underlined word is a 14px-tall target; give it room without making it look
+       like a button. */
+    .linkBtn {
+        display: inline-flex;
+        align-items: center;
+        min-height: 44px;
+        padding: 0 0.4rem;
+    }
+}

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

@@ -394,6 +394,29 @@ document.addEventListener("DOMContentLoaded", () => {
         Toast.show("Table reset.", { duration: 2500 });
     });
 
+    // A pre-filled amount is a suggestion, so reaching for the box replaces it.
+    //
+    // Delegated from the document rather than wired per field: the raise pad, the
+    // add-chips sheet and the seat editor all build their inputs fresh every render,
+    // and a box added later should not have to remember to ask for this.
+    document.addEventListener("focusin", event => {
+        const field = event.target;
+        if (!Money.selectsOnFocus(field)) return;
+        if (!field.value) return;
+        // After the browser has finished placing its own caret, or it wins the race
+        // and the selection collapses again the moment the tap completes.
+        setTimeout(() => {
+            if (document.activeElement !== field) return;
+            try {
+                field.select();
+            } catch {
+                // A number input refuses setSelectionRange in some browsers; select()
+                // is the one that works on both, and if neither does the field is
+                // simply left as it was.
+            }
+        }, 0);
+    });
+
     document.getElementById("resolvePotBtn").addEventListener("click", openPotWizard);
 
     [

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

@@ -48,6 +48,24 @@ const Money = {
         return (this.toCents(amount) / 100).toFixed(2);
     },
 
+    // Should focusing this field select what's already in it?
+    //
+    // Every amount box in this tool opens pre-filled with a suggestion: the raise pad
+    // offers the minimum, Add chips offers a buy-in, the seat editor offers the stack
+    // it already has. A dealer taps the box because they want a *different* number,
+    // and a tap puts the caret after the suggestion instead of over it. Measured on a
+    // phone: the raise pad showing 4, tap, type "60" — the field reads 460. Add chips
+    // showing 200, tap, type "50" — 20050.
+    //
+    // Only number boxes. A name or a note is a thing you edit, and selecting all of
+    // it on focus would be the same mistake pointing the other way.
+    selectsOnFocus(field) {
+        if (!field || field.tagName !== "INPUT") return false;
+        const type = String(field.type || "").toLowerCase();
+        if (type === "number") return true;
+        return type === "text" && String(field.inputMode || "").toLowerCase() === "decimal";
+    },
+
     // "+$40.00" / "-$40.00" rather than "$-40.00" — a standings column is read at a
     // glance, and the sign belongs out front where the eye lands first.
     formatSigned(amount) {

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/selectsOnFocus.test.js

@@ -0,0 +1,53 @@
+// Which fields replace their contents when a dealer reaches for them.
+const test = require("node:test");
+const assert = require("node:assert");
+const { Money } = require("./load");
+
+// Enough of an input to answer the question, without a DOM.
+const field = (props = {}) => ({ tagName: "INPUT", type: "text", inputMode: "", ...props });
+
+test("a number box selects", () => {
+    assert.equal(Money.selectsOnFocus(field({ type: "number" })), true);
+});
+
+test("a decimal keypad box selects", () => {
+    // The raise pad's amount is type=text with inputmode=decimal, so the phone shows
+    // a number pad without the browser's spinner arrows.
+    assert.equal(Money.selectsOnFocus(field({ type: "text", inputMode: "decimal" })), true);
+});
+
+test("a name does not", () => {
+    // Selecting all of a name on focus is the same mistake pointing the other way:
+    // a name is a thing you edit, not a suggestion you replace.
+    assert.equal(Money.selectsOnFocus(field({ type: "text" })), false);
+});
+
+test("a colour swatch does not", () => {
+    assert.equal(Money.selectsOnFocus(field({ type: "color" })), false);
+});
+
+test("a checkbox does not", () => {
+    assert.equal(Money.selectsOnFocus(field({ type: "checkbox" })), false);
+});
+
+test("a textarea does not, whatever it is asked", () => {
+    assert.equal(Money.selectsOnFocus({ tagName: "TEXTAREA", type: "text", inputMode: "decimal" }), false);
+});
+
+test("a select does not", () => {
+    assert.equal(Money.selectsOnFocus({ tagName: "SELECT", type: "select-one" }), false);
+});
+
+test("case doesn't matter", () => {
+    assert.equal(Money.selectsOnFocus(field({ type: "NUMBER" })), true);
+    assert.equal(Money.selectsOnFocus(field({ type: "TEXT", inputMode: "DECIMAL" })), true);
+});
+
+test("nothing at all is not a field", () => {
+    assert.equal(Money.selectsOnFocus(null), false);
+    assert.equal(Money.selectsOnFocus(undefined), false);
+});
+
+test("a field with no type stated is a text box, so it does not", () => {
+    assert.equal(Money.selectsOnFocus({ tagName: "INPUT" }), false);
+});