SIGN IN SIGN UP

fix(ui): the pay button was off the screen

Asked to find what was wrong with the product, I measured it instead of looking
at it, and the first rule I wrote failed immediately.

The pay button sat 699px below the fold at 1280x800 and 1298 below it on a
phone. Pressing INSERT COIN on the arcade demo changed nothing a visitor could
see. Three previous audits had clicked through this flow and passed it, because
whoever clicks already knows where the button is.

The cause was an earlier fix. A round in August moved the whole disclosure panel
above the button, correctly refusing to bury the caveats under the call to
action, and 985px of rows then pushed the button two screens down. Both things
were right and they cannot both be done that way, so the short version now sits
above the button and the full list stays below it, still open. Three mutations
of that order fail the unit tests.

Also measured and fixed:

- The total was 12px, the same size as its own label, and it is both what the
  payer agrees to and the finding this project is built on. It has its own block
  at 26px now. "7 STRK, or 13 with nothing shielded yet" was one sentence
  carrying two prices; the figure and the condition are separate lines.
- Tap targets under 44px across all three apps: a select arriving unstyled at
  19px, six inputs at 33 and 36, five buttons at 33 and 35.
- h1 at 20px against 14px body text on the arcade and the dashboard.
- The arcade canvas was 442x330, a coin-op cabinet the size of a postcard. At
  600x450 it broke the two-column layout, which the audit caught in the same
  run; the wrap width now clears it.
- The payer page printed the memo, then the widget printed it again underneath.
- A sentence about receipts sat in the block someone reads before deciding.

test/layout-audit.mjs holds seven rules and returns measurements, not opinions.
test/layout-check.html runs all seven screens at two viewports: 14 of 14 clean,
and reverting any one of these fixes turns it red.

Two rules were wrong and were corrected against the standard rather than
loosened: 44px is WCAG 2.5.5 and right for a payment control, while a link is
held to 2.5.8's 24px and a link inside a sentence is exempt entirely. And
"visible" first meant the top edge was above the fold, which passed a button
showing nine of its forty-four pixels; it now means the whole control, with 16px
of clearance for a phone's address bar.

198 tests pass. The QR pixel round-trip and both denial-of-service attacks were
re-run afterwards and still hold.
B
bongbongcrypto committed
cc3b4b3deab045dc8ccd488ff99834cfc9eeffd6
Parent: 8209655