vh/booth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(as-S3): phone layouts — nothing overprints, no word set narrower than itself

Browse Source 
From the anti-slop run (design-dev, 2026-09-28). Measured in a real browser
at 390x844 (tests/test_antislop_browser.py), because a layout claim read off
a stylesheet is a guess.

- Bench rows wrap at <=600px (state + name/URL, then who/when/actions); the
  name's column was squeezed to ~53px and overprinted the owner and date.
- The board head and the benches head drop their note under the count, so
  "33 links · 1 pinned" / "3 benches" keep one line.
- An inline doc's bar wraps: the name takes the full width and breaks only
  where it must; it was set one word wide.
- A file tile's download link starts below the ordinal badge.
- The review and compare stages drop the tagline at <=600px (the server
  marks them `page-stage` on <html>), so the header is one line; the Desk
  keeps its tagline (the test's negative control).

Not changed, with reasons in the contract: `.vname` already ellipsises, and
the filmstrip's clipped edge frame is the scroller's "more" cue.
Contract: as_antislop S3. Falsifiers: antislop.toml 41/41 proved (S1-S3);
all 12 tables 321/321 proved on this tree.
This commit is contained in:
vh
2026-09-28 13:30:31 -07:00
parent 54f3531833
commit 44b80e6d9a
6 changed files with 216 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/contracts/as_antislop.contract.md
+21 -2
View File
@@ -13,6 +13,7 @@ touches:
- "booth/app.py (filters)"
- "booth/templates/_marks.html, _ask_inline.html, booth.html (S1)"
- "booth/templates/base.html, view.html; booth/static/embed.js (S2)"
- "booth/templates/base.html, view.html, compare.html; tests/test_antislop_browser.py (S3)"
- "tests/test_antislop.py; tests/mutations/antislop.toml"
assumptions:
- "ONE VIEWER, on this box: local time is the operator's time (US Pacific), as the existing date filters already assume."
@@ -89,10 +90,28 @@ The run found that the Booth is sound on desktop and has a set of problems a vie
- **Folded after the first gate run:** three more labels were below the 11px floor, and they are now `--size-micro` like the rest. They are the flagged tray's number (10px), the tile's "flagged" stamp (10.5px) and compare's A/B badge (9.5px). The report's list had named only the film numbers. *Falsifiable:* the same computed-style test, and three more rows.
- **Folded from the heid bug-hunt.** The embed's ask title no longer fades either (`opacity:.62` on `.bk-ask-title` contradicted "nothing fades", Q9). The claims above are also held on the browser's computed style (`tests/test_antislop_s2_browser.py`): a stylesheet grep cannot see a later rule in the cascade (`font-size:1px`, `color:transparent`, `filter:grayscale`, a placeholder at `opacity:0`), and the browser can.
## S3 to S6
## S3 — phone layouts
**The rule:** at phone width (≤600px), no text overprints other text, and no single word is set in a column narrower than itself. These claims are measured in a real browser at 390×844 (`tests/test_antislop_browser.py`), because a layout claim read off a stylesheet is a guess.
- **Bench rows wrap instead of squeezing.** At ≤600px a row wraps. The state word and the bench (name over URL) take the first line; who, when, the state buttons and × take the second, indented under the name.
- *Falsifiable:* without the wrap, the name, owner and date boxes intersect: `test_bench_rows_do_not_overprint_on_a_phone`.
- **An inline doc's name keeps its line.** At ≤600px the doc bar wraps. The name takes the full width and breaks only where it must (`overflow-wrap:anywhere`, not `word-break:break-all`); the actions wrap under it.
- *Falsifiable:* `test_doc_name_keeps_a_readable_line_on_a_phone`.
- **The link board's headers stay compact.** At ≤600px the note drops under the count, so the count ("33 links · 1 pinned", "3 benches") stays on one line, in both the board head and the benches head.
- *Falsifiable:* `test_board_head_stays_compact_on_a_phone`.
- **A file tile's number clears its download link.** The ordinal badge sits in the tile's top-left corner, so a file tile's link starts below it.
- *Falsifiable:* `test_file_tile_number_clears_the_download_link`.
- **The review and compare pages keep their header to one line on a phone.** At ≤600px they drop the tagline (every other page keeps it), so the header is the brand plus the theme toggle and the stage starts near the top. The class that scopes this is set by the server on `<body>` (`<html>` carries `data-booth`, which the reveal scripts and their tests pin exactly).
- *Falsifiable:* `test_review_header_is_one_line_on_a_phone`, which also checks that the Desk keeps its tagline.
**Measured, not changed** (the detector's rows that are misreads here):
- `.vname` already ellipsises; the detector measures the clipped inner width.
- The filmstrip clips its next frame at the edge on purpose: the clipped frame is the "there is more" cue of a horizontal scroller.
## S4 to S6
These are added as each slice is staged:
- S3, phone layouts;
- S4, reading measure;
- S5, interaction and screen readers;
- S6, the operator's rulings (tagline, needs-you stripe, matte brand dot, the Wipe-now stripe on `::before`).