JoshHeaps.Net/Pages/Casino/TexasHoldem.cshtml

@@ -104,15 +104,17 @@
                 <summary>Session</summary>
                 <div class="panelBody">
                     <h3 class="panelSubhead">Standings</h3>
-                    <div id="standingsTable">
-                        <div class="standingsRow standingsHeader">
-                            <span>Player</span>
-                            <span>In</span>
-                            <span>Won</span>
-                            <span>Net</span>
-                            <span title="Chips in front of them, less the cash they handed over">Cash out</span>
+                    <div class="standingsTableWrap">
+                        <div id="standingsTable">
+                            <div class="standingsRow standingsHeader">
+                                <span>Player</span>
+                                <span class="standingsInHead">In</span>
+                                <span class="standingsWonHead">Won</span>
+                                <span>Net</span>
+                                <span title="Chips in front of them, less the cash they handed over">Cash out</span>
+                            </div>
+                            <div id="standingsList"></div>
                         </div>
-                        <div id="standingsList"></div>
                     </div>
                     <p id="standingsEmptyHint" class="fieldHint">Everyone who has bought in shows up here, with what they'd be owed if the night ended now.</p>
 

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

@@ -1465,9 +1465,22 @@ button,
     overflow-y: auto;
 }
 
+/* The sidebar is about 290px wide, and four numeric columns at a 4.5rem minimum
+   plus gaps come to 320px — so the name column, being the only flexible one, was
+   collapsing to *zero* and player names disappeared entirely. Names were already
+   down to 50px with four columns; adding the cash-out column finished them off.
+   Measured at 360, 390 and 1280 alike, since the sidebar is narrow at all of them.
+
+   So the table earns its columns instead of assuming them. Narrow: the player and
+   the two numbers a banker settles up from. Wide enough: the per-hand detail as
+   well. Everything is in the CSV export either way. */
+.standingsTableWrap {
+    container-type: inline-size;
+}
+
 .standingsRow {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
+    grid-template-columns: minmax(4rem, 1fr) auto auto;
     gap: 0.5rem;
     align-items: baseline;
     padding: 0.3rem 0.1rem;
@@ -1478,7 +1491,36 @@ button,
 .standingsRow > span:not(:first-child) {
     text-align: right;
     font-variant-numeric: tabular-nums;
-    min-width: 4.5rem;
+    min-width: 3.6rem;
+}
+
+.standingsRow > .standingsName {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* The per-hand columns are detail: how the night's swings happened. They're the
+   first thing to go when there isn't room, because Net and Cash out are what the
+   banker is actually reading. */
+.standingsIn,
+.standingsWon,
+.standingsInHead,
+.standingsWonHead {
+    display: none;
+}
+
+@container (min-width: 30rem) {
+    .standingsRow {
+        grid-template-columns: minmax(5rem, 1fr) auto auto auto auto;
+    }
+
+    .standingsIn,
+    .standingsWon,
+    .standingsInHead,
+    .standingsWonHead {
+        display: block;
+    }
 }
 
 /* The settle-up column is the one a banker reads while counting out cash, so it