Make the dealer table usable on a phone

Two things were broken on a narrow screen. The seat ring is drawn on a radius
measured from the table wrap, so at phone width the left- and right-most seats
hung off the edge of the viewport — at a ten-handed table two players were
simply not on screen. And tapping a seat opened an editor far enough down the
page that it looked like nothing had happened.

The ring is now inset by half a puck on phones, which keeps every seat on
screen, and the pucks are narrower there so neighbours stop overlapping where
the ring flattens out at the top and bottom. The seat editor becomes a bottom
sheet that slides up over the table: grip, Done button, tap the same seat again
to dismiss, table still visible above it. Its controls grow to thumb size, and
every field goes to 16px — below that iOS zooms the page on focus and the
dealer has to pinch back out mid-hand.

Header actions become full-width tap targets, and the page padding tightens to
give the table the width it needs. Nothing above 700px changes.

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

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

@@ -71,6 +71,8 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     });
 
+    document.getElementById("closeSeatEditorBtn").addEventListener("click", () => Render.closeSeatEditor());
+
     document.getElementById("closePotWizardBtn").addEventListener("click", () => PotWizard.close());
     document.getElementById("potWizardOverlay").addEventListener("click", e => {
         if (e.target.id === "potWizardOverlay") PotWizard.close();

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

@@ -106,7 +106,10 @@ const Render = {
             node.classList.toggle("seatSelected", index === this.selectedSeatIndex);
 
             node.addEventListener("click", () => {
-                this.selectedSeatIndex = index;
+                // Tapping the open seat again closes it — on a phone the editor is a
+                // sheet over the table, and the seat you just tapped is the closest
+                // thing to hand for dismissing it.
+                this.selectedSeatIndex = this.selectedSeatIndex === index ? null : index;
                 this.renderSeats();
                 this.renderSeatEditor();
             });
@@ -175,10 +178,20 @@ const Render = {
 
     // ---- Seat editor panel (the full form for whichever seat is selected) ----
 
+    closeSeatEditor() {
+        this.selectedSeatIndex = null;
+        this.renderSeats();
+        this.renderSeatEditor();
+    },
+
     renderSeatEditor() {
         const title = document.getElementById("seatEditorTitle");
         const body = document.getElementById("seatEditorBody");
 
+        // Drives the mobile bottom sheet: the panel only slides up over the table
+        // while a seat is actually being edited.
+        document.body.classList.toggle("seatSheetOpen", this.selectedSeatIndex !== null);
+
         if (this.selectedSeatIndex === null) {
             title.textContent = "Select a seat";
             body.innerHTML = '<p class="fieldHint">Click a seat at the table to edit their name, cards, chips and anything else.</p>';