Give the table the screen back when the phone is on its side

A phone held sideways is 640x360: short of height and swimming in width. The layout
spent the whole of that shortage on one column — 70px of header, 85px of felt, 205px
of action bar. Two rows of seat pucks 55px tall have to fit inside 85px of felt, which
they cannot, so seven of nine finished past the rail with up to 17px of puck floating
on the page. That single fault was 96 of the 98 offenders the layout audit could find
anywhere.

No amount of shrinking fixes it, because the shortage was never in the table. The bar
is 205px tall and 529 wide to hold three buttons and a status line, and it was taking
that height from the one element that needed height. So in landscape it moves: the bar
becomes a rail down the right-hand side, the table takes the column beside it, and the
felt goes from 529x85 to 409x205 — an actual oval, with room for two rows of pucks and
a gap between them. It also puts Fold, Call and Raise under the right thumb rather than
along the bottom edge, where a landscape grip has the palm.

Which layout the bar is in is declared by the stylesheet in a custom property and read
back by actionBar.js, because the one thing that must not exist is a second copy of
that media query written in JavaScript.

Then the ring stopped predicting itself. seatRingRadii works out the widest ring whose
outermost puck still finishes inside the rail, and it is right about a puck it measured
before the width search settled and before a name wrapped or was shortened — each worth
up to 15px of height arriving after the answer. Four viewports finished with the top
seat 5-6px over. render.js now checks the drawn result the way the audit judges it: if
the worst puck hangs 6px past the rail, the ring comes in by 6px and they are placed
again. A layout that predicts itself has to be right about the future; one that measures
itself only has to be right about the present.

Also in this round:

- Names shorten at a word instead of being chopped mid-one. "Mike from work" on a
  nine-handed phone was "Mike f…"; he is Mike. A name never ends on a joining word,
  because "Mike from" looks cut off rather than shortened, and the whole name is on the
  tooltip either way.

- The blind badge is counted in what a seat needs. It always points away from the table,
  which was taken to mean it costs nothing between two seats — true of a straight rail
  and false of a ring, where neighbours sit at different heights. Three tables had a
  player's stack painted under the next player's SB or BB, and that badge outranks
  everything else on the felt. It also got shorter, 15px to 12: clearing its own name at
  5px of overhang instead of 9 hands every chair in the ring four pixels back, which at
  640x360 is the difference between a 66px puck and a 48px one.

- Border-box, inherited, for the whole app rather than nine elements opting in one at a
  time. Both elements that hadn't went wrong in the same afternoon: the rail overran the
  page's padding by 25px and put Resolve Pot underneath itself, and the raise pad's
  amount field pushed a horizontal scrollbar across a 640px phone.

- The raise amount field is thumb-sized. The rule that sizes fields for a finger names
  the settings panels and the seat form, so the one field on the one surface built for
  thumbs was 36px on every phone in the list. The sweep never saw it because it had no
  step that opened the raise pad; it has one now, and that step also caught the rail
  squeezing its own status line under the pad.

- mobile-web-app-capable alongside Apple's older name, which Chrome has been calling
  deprecated in this page's console on every load.

The audit goes from 19 failing configurations and 98 offenders to 2 and 3, across 294
audits — thirteen viewports, three table shapes, a mouse and a thumb. What is left is
twelve players on a 360px phone with the raise pad open, where twelve pucks at the 44px
minimum genuinely do not fit on the felt; the search reports that rather than papering
over it. Each new mechanism was checked by breaking it on purpose: removing the settle
pass puts 26 offenders back, dropping the badge from the footprint 5, and un-sizing the
raise field is caught by the step that now opens it.

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

tests/holdem/seatFootprint.test.js

@@ -165,10 +165,62 @@ describe("what the stylesheet has to keep holding up", () => {
     });
 });
 
+describe("the blind badge counts", () => {
+    // It didn't, for a while, and the reasoning had one hole in it. The badge hangs 9px
+    // off the puck and always points away from the table — `top: -9px` on the upper arc,
+    // `bottom: -9px` on the lower — so two seats facing each other across the felt wear
+    // them back to back and it costs nothing. That much is true.
+    //
+    // What was also claimed is that two seats on the *same* arc "wear them at the same
+    // height, offset by exactly as much as the pucks are". True of a straight rail,
+    // false of a ring: neighbours on a curve sit at different heights, so the badge
+    // pointing away from the table on one of them points at the corner of the other.
+    // Measured on the running page, three tables in the sweep had a player's stack
+    // painted under the next player's SB or BB — and the badge outranks everything else
+    // on the felt, so what the dealer reads in that spot is the wrong number entirely.
+    test("a seat needs room for the badge it might be wearing", () => {
+        const puck = { width: 64, height: 40 };
+        assert.deepEqual(Render.seatFootprint(puck),
+            { width: 64, height: 40 + Render.SEAT_BADGE_OVERHANG_PX });
+    });
+
+    test("sideways it costs nothing, because the badge doesn't go sideways", () => {
+        // It sits inside the puck's own width — see "all three sit in the same place"
+        // above, which holds the stylesheet to it.
+        assert.equal(Render.seatFootprint({ width: 64, height: 40 }).width, 64);
+    });
+
+    test("the number here is the number the stylesheet draws", () => {
+        // Two files have to agree about one distance: holdem.css hangs the badge off the
+        // puck by it, render.js charges every chair in the ring for it. They are wired
+        // together by nothing but this test. Drift either way is silent — too small and
+        // badges land on neighbours again, too large and every puck on a nine-handed
+        // phone gives up a size step for clearance nothing needs.
+        const top = CSS.match(/\.blindBadge \{[^}]*?(?<![\w-])top:\s*(-?[\d.]+)px/);
+        const bottom = CSS.match(/\.seat\.seatBelowCentre \.blindBadge \{[^}]*?(?<![\w-])bottom:\s*(-?[\d.]+)px/);
+        assert.ok(top && bottom, "the badge should hang off both arcs");
+        assert.equal(Math.abs(Number(top[1])), Render.SEAT_BADGE_OVERHANG_PX);
+        assert.equal(Math.abs(Number(bottom[1])), Render.SEAT_BADGE_OVERHANG_PX,
+            "the same distance at both ends, or one arc is charged for the other's badge");
+    });
+
+    test("and it is counted once, not once per seat", () => {
+        // seatsCollide is given one box and compares centres against it, so the
+        // separation it asks for is one puck plus one badge. That is exactly right for
+        // two seats on the same arc each wearing one, and generous for the far commoner
+        // case where only one of the two is in the blinds at all. Counting it on both
+        // sides is what made a landscape table unsatisfiable the first time this was
+        // tried, back when that felt was 87px tall.
+        const puck = { width: 64, height: 40 };
+        const grew = Render.seatFootprint(puck).height - puck.height;
+        assert.equal(grew, Render.SEAT_BADGE_OVERHANG_PX);
+        assert.ok(grew < 2 * Render.SEAT_BADGE_OVERHANG_PX);
+    });
+});
+
 describe("with no browser to measure", () => {
     test("nothing here throws", () => {
         assert.equal(Render.measuredSeatBox(), null);
         assert.equal(Render.seatFootprint(null), null);
-        assert.deepEqual(Render.seatFootprint({ width: 64, height: 40 }), { width: 64, height: 40 });
     });
 });