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

@@ -1013,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;
@@ -1470,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;
@@ -3185,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) {

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);
+});