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

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.
2026-09-28 13:30:31 -07:00
parent 54f3531833
commit 44b80e6d9a
6 changed files with 216 additions and 3 deletions
@@ -262,3 +262,54 @@ file = "booth/templates/base.html"
 test = "tests/test_antislop_s2_browser.py::test_labels_and_sentences_render_at_their_floors"
 old = '''    font:700 var(--size-micro)/1.2 var(--font-mono);background:var(--accent);color:var(--accent-contrast)}'''
 new = '''    font:700 9.5px/1.2 var(--font-mono);background:var(--accent);color:var(--accent-contrast)}'''
+
+# ---- S3: phone layouts (measured in a real browser at 390x844)
+
+[[mutation]]
+label = "S3 bench rows squeeze instead of wrapping"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_bench_rows_do_not_overprint_on_a_phone"
+old = '''    .bench-row{flex-wrap:wrap;row-gap:4px}'''
+new = '''    .bench-row{row-gap:4px}'''
+
+[[mutation]]
+label = "S3 the board head's phone rule gone (the count wraps)"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_board_head_stays_compact_on_a_phone"
+old = '''  @media (max-width:600px){.board-head{flex-wrap:wrap}.board-title{white-space:nowrap}'''
+new = '''  @media (max-width:1px){.board-head{flex-wrap:wrap}.board-title{white-space:nowrap}'''
+
+[[mutation]]
+label = "S3 the doc bar squeezes the name again"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_doc_name_keeps_a_readable_line_on_a_phone"
+old = '''  @media (max-width:600px){.doc-inline > .doc-bar{flex-wrap:wrap;row-gap:4px}'''
+new = '''  @media (max-width:1px){.doc-inline > .doc-bar{flex-wrap:wrap;row-gap:4px}'''
+
+[[mutation]]
+label = "S3 a file tile's link starts under the number again"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_file_tile_number_clears_the_download_link"
+old = '''  .item > .ord ~ .dl{padding-top:44px}'''
+new = ''''''
+
+[[mutation]]
+label = "S3 the review keeps its tagline on a phone"
+file = "booth/templates/view.html"
+test = "tests/test_antislop_browser.py::test_review_header_is_one_line_on_a_phone"
+old = '''{% block body_attrs %} class="page-stage"{% endblock %}'''
+new = ''''''
+
+[[mutation]]
+label = "S3 the tagline hidden on every page (the Desk's negative control)"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_review_header_is_one_line_on_a_phone"
+old = '''  @media (max-width:600px){body.page-stage .topbar .tagline{display:none}}'''
+new = '''  @media (max-width:600px){body .topbar .tagline{display:none}}'''
+
+[[mutation]]
+label = "S3 the benches head stacks its count again"
+file = "booth/templates/base.html"
+test = "tests/test_antislop_browser.py::test_board_head_stays_compact_on_a_phone"
+old = """    .bench-head{flex-wrap:wrap}.bench-title{white-space:nowrap}.bench-note{flex:1 1 100%}}"""
+new = """    }"""