Stop re-typing the layout audit into a console every round

Last round I found a regression I'd shipped two rounds earlier: the standings
table's player-name column was zero pixels wide, at every viewport, and nobody
noticed because the audit that would have caught it only ever existed in a
previous session's scrollback. These checks have been re-written by hand at least
six times, and each time they covered only whatever had just changed.

So they're a file now. uiAudit.js runs in the page — no build step, no
package.json, no dependency — and checks touch-action and tap highlights, that
fields stay selectable and are big enough not to trigger iOS zoom, that nothing
important is covered or stranded off-screen, that no grid column has collapsed to
nothing, and that no text is painted outside its box. runUiAudit.js drives it over
the table, all five overlays and Quick Split at thirteen viewports. Deliberately
outside CI: the unit suite is dependency-free and runs in a second, this one needs
a browser and a running site.

Three real faults it found on its first run

Fields were 13.3px on every iPad. The 16px minimum that stops iOS zooming the page
on focus went in inside a max-width:700px block, and every iPad is wider than
that — so a dealer on a tablet, which is the device this is most likely to be
propped up on, got the table zoomed every time they touched the blind amount. The
reason for that rule was never "narrow screen", it was "iOS". Font size applies at
all widths now, and the 44px touch targets key off hover:none, which is what
actually distinguishes a finger from a mouse.

The seat menu couldn't be scrolled. It had no height limit and no overflow, so on
a phone held sideways its first two actions — Fold and All-in — sat below the
bottom of the screen with no way to reach them. A dealer in landscape could
long-press a seat and then not fold it.

The pot wizard sat under the action bar. Every other overlay is z-index 90-98; the
wizard alone was at 50, below both the action bar at 55 and the toast at 80. In
landscape one of its inputs was completely covered by the Fold button, and a toast
could sit over "Confirm Winner(s)". It was the odd one out rather than a decision.

Three faults in the audit itself, found by checking before acting

Worth recording, because each would have had me "fix" something that wasn't broken:

- an ellipsised name was reported as painting outside its seat. A Range measures
  laid-out text, which runs past the element while overflow:hidden quietly clips
  it. Only overflow that is actually visible can paint over a neighbour.
- every link below the fold was reported as off-screen. Something under the fold on
  a page that scrolls is reachable; the check now asks whether scrolling can bring
  it into view, which is the thing that actually matters.
- a button in the newly-scrollable seat menu came back "covered by null".
  elementFromPoint returns null for a point outside a scrollable ancestor's clip —
  scrolled out of view, not covered by anything.

A toast partly over a control is a warning rather than a failure now: it dismisses
itself and carries a close button, and on a desktop it necessarily lands over a
table that fills the content column. Fully covered by a toast is still a failure,
because that was a real bug once — a seat sat exactly under the Undo button.

Final sweep: 13 viewports, 65 overlay checks, 13 full-page audits, 4 Quick Split
audits, zero failures, one warning. 137 unit tests still passing.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb

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

@@ -1040,6 +1040,13 @@ button,
     border-radius: 16px 16px 0 0;
     padding: 0.35rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
     box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.65);
+    /* This sheet had no height limit and didn't scroll, so on a phone held sideways
+       its first two actions — Fold and All-in, the two that matter — sat below the
+       bottom of the screen with no way to reach them. A dealer in landscape could
+       long-press a seat and then not fold it. */
+    max-height: 85vh;
+    overflow-y: auto;
+    overscroll-behavior: contain;
 }
 
 .seatMenuHeader {
@@ -2207,7 +2214,12 @@ body.hasActionBar #toastHost {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 50;
+    /* Every other sheet in here sits at 90-98; this one was at 50, underneath both
+       the action bar (55) and the toast (80). So the bar drew on top of the dialog
+       that pays people — in landscape one of its inputs was completely covered by
+       the Fold button — and a toast could sit over "Confirm Winner(s)". It's the odd
+       one out rather than a deliberate choice, and it joins the others. */
+    z-index: 95;
     padding: 1.5rem;
 }
 
@@ -2221,8 +2233,13 @@ body.hasActionBar #toastHost {
     border-radius: 10px;
     width: 100%;
     max-width: 480px;
-    max-height: 85vh;
+    /* 85vh is most of a 390px-tall landscape window, and the action bar is fixed over
+       the bottom of it — so the last of the wizard sat underneath the bar and its
+       controls couldn't be tapped. Leaving the bar's own height out of the budget
+       keeps the whole dialog above it. */
+    max-height: calc(85vh - var(--actionBarHeight, 0px));
     overflow-y: auto;
+    overscroll-behavior: contain;
     padding: 1.2rem 1.4rem 1.6rem;
 }
 
@@ -2816,3 +2833,33 @@ textarea:focus-visible {
 [role="alertdialog"]:focus {
     outline: none;
 }
+
+/* ---------- Fields on a tablet ----------
+   The 16px minimum and the 44px touch targets were both written into the phone
+   media query, so every iPad size missed them — measured at 768, 834 and 1024 wide,
+   where all ten setup fields sat at 13.3px. iOS zooms the page whenever a field
+   under 16px takes focus, so a dealer on an iPad was getting the table zoomed every
+   time they touched the blind amount, then pinching back out. The reason for the
+   rule was never "narrow screen", it was "iOS", and an iPad is iOS.
+
+   Font size applies everywhere now — 13.3px was small for a settings field on a
+   desktop anyway. The touch sizing keys off `hover: none`, which is what actually
+   distinguishes a finger from a mouse; a tablet gets thumb-sized controls and a
+   desktop keeps its compact sidebar. */
+.seatEditorForm input:not([type="checkbox"]):not([type="color"]),
+.panelBody input:not([type="checkbox"]):not([type="color"]),
+.subPanelBody input:not([type="checkbox"]):not([type="color"]),
+.panelBody select,
+.panelBody textarea {
+    font-size: 16px;
+}
+
+@media (hover: none) {
+    .seatEditorForm input:not([type="checkbox"]):not([type="color"]),
+    .panelBody input:not([type="checkbox"]):not([type="color"]),
+    .subPanelBody input:not([type="checkbox"]):not([type="color"]),
+    .panelBody select {
+        min-height: 44px;
+        padding: 0.4rem 0.6rem;
+    }
+}