Take the glass off the middle of the table

The board — the five community cards a dealer taps to enter the flop, the
turn and the river — could not be pressed at all. #seatsLayer is an
`inset: 0` sibling of the table that holds the seat pucks, and an element
with no background still hit-tests, so the empty middle of that layer took
every tap aimed at what was underneath it. Measured at 1280x900 with five
cards out: all five hit-tested to `div#seatsLayer`, on every screen wide
enough to keep the board in the middle rather than on the strip. #betsLayer,
the other sheet over the felt, has been pointer-events: none since it was
written.

Underneath that, the cards were drawing at a little over half their size.
placeBoard measures how much middle the felt has and writes it to the
centre's max-width — but max-width caps a box and does not claim anything,
and the centre is a flex column that sizes to its content. So with 463px of
measured room it went on being 136px wide, the row inside it is width: 100%
of that, and five cards sharing 136px come to rest on their own min-width:
24px, against the 44px floor every other control on the felt is held to.

Neither was visible to anything. A scripted probe calling .click() on the
node skips hit-testing entirely, and the sweep's occlusion check had only
ever been shown three selectors' worth of the page — the action bar, the
header and the seats. It asks about every control now, which took three
refinements to be honest: a control that set pointer-events: none has opted
out rather than been covered; a shut <details> hands out a real rect for
everything in it, and checkVisibility is the browser's own answer; and flow
content under a fixed layer is a position rather than a fault, so it is said
rather than failed.

The five sheets a dealer spends half the night in were getting one rule of
twenty-five. They get all of them now. Three rules had to learn what a modal
is first: two ask about the fixed bar, which is not a question while a scrim
is covering it, and the third called the bottom four rows of a sheet that
scrolls unreachable buttons. The helper all three lean on had its own blind
spot — it asked whether an element had left its box entirely, which is true
of something well below the fold and false of something hanging eight pixels
over the edge of it.

That turned up two controls that were a glyph and nothing else: the pot
wizard's close, on the one dialog that divides money, and the cross that
removes a custom field, in a column of identical crosses.

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

tests/holdem/runUiAudit.js

@@ -322,17 +322,32 @@ async function main() {
                 // spent already.
                 if (shape !== TABLES[0][0]) continue;
 
+                // The whole audit, not the one check.
+                //
+                // This ran `occlusion()` and nothing else — one rule of twenty-five — so
+                // for the sweep's entire life the five sheets a dealer spends half the
+                // night in had never been measured for touch targets, contrast, control
+                // names, text spill or anything else. The three rules that made that a
+                // reasonable thing to do are modal-aware now: two of them ask about the
+                // fixed bar, which is not a question while a scrim is covering it, and
+                // the third called every card below the fold of a sheet that scrolls an
+                // unreachable button.
                 for (const [name, open] of OVERLAYS) {
                     await page.evaluate(open);
                     await page.waitForTimeout(180);
                     checks++;
                     const result = await page.evaluate(() => {
                         const overlay = [...document.querySelectorAll("[id$='Overlay']")].find(o => !o.hidden);
-                        if (!overlay) return { offenders: [] };
-                        return LayoutAudit.occlusion(`#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`);
+                        const sheet = LayoutAudit.runAll({
+                            occlusionSelector: overlay
+                                ? `#${overlay.id} button, #${overlay.id} a, #${overlay.id} input`
+                                : undefined,
+                        });
+                        return { offenders: sheet.failed.flatMap(f => f.offenders), warnings: sheet.warnings };
                     });
                     await page.evaluate(() => document.querySelectorAll("[id$='Overlay']").forEach(o => { o.hidden = true; }));
                     record(`${name} · ${label} ${width}x${height}`, result.offenders);
+                    result.warnings.forEach(w => warnings.push(`${name} · ${label}: ${w}`));
                 }
             }
         }