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

@@ -318,6 +318,20 @@ button,
     margin-top: 1rem;
 }
 
+/* `hidden` means hidden.
+   
+   The attribute only carries `display: none` from the browser's own stylesheet, which
+   is the weakest rule there is: any class that sets a display — and every button here
+   sets `inline-flex` — beats it. That is not a hypothetical. Seven overlays in this
+   file already carry their own `[hidden] { display: none }` because each one was found
+   the hard way, and the eighth was a button that shipped as a 21x44 empty box under the
+   bank check on every table that didn't need it.
+   
+   One rule, for everything, so there is no ninth. */
+[hidden] {
+    display: none !important;
+}
+
 /* ---------- Poker table ---------- */
 
 #pokerTableWrap {
@@ -2338,6 +2352,9 @@ body.hasActionBar #holdemSidebar {
 .waitingAdd .holdemBtn {
     flex: none;
     min-height: 44px;
+    /* "Add" is three letters, which came out 43px wide — one pixel under the rule, and
+       the audit called it. A thumb doesn't know the word is short. */
+    min-width: 56px;
 }
 
 .waitingList {

tests/holdem/uiAudit.js

@@ -719,6 +719,26 @@ const LayoutAudit = {
         return { name: "the felt shows one dealer button", offenders };
     },
 
+    // Anything that says it is hidden and is drawn anyway.
+    //
+    // `hidden` gets its `display: none` from the browser's own stylesheet, the weakest
+    // rule in the cascade, so any class that sets a display beats it — and in this tool
+    // every button class does. The result is an element the code believes is gone,
+    // sitting on the screen: found as a 21x44 empty box under the bank check, and this
+    // file's own touch check had been calling it "could not be probed" rather than
+    // saying the plainer thing, which is that it should not be there at all.
+    hiddenButPainted() {
+        const offenders = [...document.querySelectorAll("[hidden]")]
+            .filter(el => {
+                const rect = el.getBoundingClientRect();
+                if (rect.width === 0 || rect.height === 0) return false;
+                const style = getComputedStyle(el);
+                return style.display !== "none" && style.visibility !== "hidden";
+            })
+            .map(el => `${this.describe(el)} :: hidden, but drawn ${Math.round(el.getBoundingClientRect().width)}x${Math.round(el.getBoundingClientRect().height)}`);
+        return { name: "hidden means hidden", offenders };
+    },
+
     // ---- Runner ----
 
     // Every check this file knows how to make, every time.
@@ -747,6 +767,7 @@ const LayoutAudit = {
             this.fieldFontSize(),
             this.seatOwnership(),
             this.oneDealerButton(),
+            this.hiddenButPainted(),
             this.contrast(options.contrast),
             this.touchTargets(options.minimumTarget, options.touchTargets),
         ];