From 8efe624d5d6e51dadcc212ba150db2f1a86ca7e7 Mon Sep 17 00:00:00 2001 From: "n.siegfried" Date: Thu, 20 Aug 2026 17:52:28 -0700 Subject: [PATCH] F6 - strict 2.0: the creator fits two screens at rest (closes BL-022) Nick's answer: 'strict 2.0'. The 154px overage was chrome, and every trim densifies rather than deletes - A2's one-warning banner and the SOP identity strip both stay: - collapsed section rows 46 -> 36px on fine pointers (13 rows at rest was ~130px of the overage); coarse pointers keep the 44px tablet row (C1) - ctx-bar 12 -> 7px padding; banner margin 14 -> 8, padding 11 -> 8 - .main top pad 22 -> 14 (bottom stays clear of the sticky bar) - nav-row 24/24 -> 14/14 Measured at 1440x900: 1,954 -> 1,784px = 1.98 screens. form_structure_check is 51/51 for the first time - the check never moved, the page now fits it. mobile_check 24/24 (the coarse-pointer targets held). Items: F6, BL-022 (closed), C1 preserved. Co-Authored-By: Claude Fable 5 --- docs/waves/backlog.md | 2 +- html/wp-creation-styles.css | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/docs/waves/backlog.md b/docs/waves/backlog.md index c023927..863d685 100644 --- a/docs/waves/backlog.md +++ b/docs/waves/backlog.md @@ -491,7 +491,7 @@ deliberately deferred. - **Suggested wave or follow-up:** wave 9 backlog sweep (`T9.9`), verified with the `tests/qa_gate_check.py` sink pattern. -### BL-022 — DECIDED 2026-08-20 (strict 2.0; chrome compressed, closed by the F6 task on feat/wp-suite-r3-housekeeping) +### BL-022 — CLOSED 2026-08-20 (strict 2.0; the chrome compressed to 1,784px = 1.98 screens; form_structure_check 51/51 for the first time) - **Found during:** T7.2, re-measured at the wave 7 exit - **Where:** `html/wp-creation-index.html` page chrome; `tests/form_structure_check.py` diff --git a/html/wp-creation-styles.css b/html/wp-creation-styles.css index a593b06..0d9f35b 100644 --- a/html/wp-creation-styles.css +++ b/html/wp-creation-styles.css @@ -154,7 +154,7 @@ after .main is what lets it be a sticky column without wrapping the layout. */ .wp-layout { display: flex; flex-direction: column; width: 100%; margin: 0; } .main { min-width: 0; max-width: none; margin: 0; - padding: 22px 28px 72px calc(var(--nav-w,288px) + 28px); + padding: 14px 28px 72px calc(var(--nav-w,288px) + 28px); /* F6: top pad only; bottom stays clear of the sticky bar */ transition: padding-left .18s ease; } .section { display: none; } @@ -308,7 +308,7 @@ .deliv-text .dt-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* ── NAV ── */ - .nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); } + .nav-row { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); } /* F6 */ .btn { padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; cursor: pointer; border: 1px solid; transition: all .15s; @@ -537,7 +537,7 @@ border-radius:var(--radius); padding:7px 10px; font-size:11px; } /* ── CREATION TOOL ───────────────────────────────────────────────── */ - .ctx-bar { max-width:none; margin:0; padding:12px 28px 12px calc(var(--nav-w,288px) + 28px); display:flex; align-items:center; gap:20px; + .ctx-bar { max-width:none; margin:0; padding:7px 28px 7px calc(var(--nav-w,288px) + 28px); display:flex; align-items:center; gap:20px; /* F6: denser, still the SOP identity strip */ border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; } .ctx-empty { color:var(--text-muted); font-size:13px; } .ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; } @@ -575,7 +575,7 @@ /* ── WORK PACKAGE FORM ───────────────────────────────────────────── */ .sop-hint { color:var(--accent) !important; } .release-banner { max-width:none; margin:0; padding:0 28px 0 calc(var(--nav-w,288px) + 28px); } - .release-banner .rb-inner { margin-top:14px; border-radius:var(--radius); padding:11px 16px; font-size:13px; font-weight:600; + .release-banner .rb-inner { margin-top:8px; border-radius:var(--radius); padding:8px 16px; font-size:13px; font-weight:600; /* F6: A2's one warning, denser */ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .rb-ready { background:var(--accent-green-dim); color:var(--accent-green); border:1px solid var(--wp-status-success-border-b); } .rb-notready { background:var(--accent-amber-dim); color:var(--accent-amber); border:1px solid var(--wp-status-warning-border-b); } @@ -758,7 +758,13 @@ /* A collapsed section should read as a ROW in a list, not as a box with one line in it. Eleven of them at the card's own 28px padding is 660px of nothing - which is a third of what F6 was measuring, arriving by a different door. */ - .card.collapsed { padding-top: 10px; padding-bottom: 10px; } + /* F6 strict 2.0: a collapsed row is 36px on fine pointers - 13 of them at + rest is where most of the two-screens overage lived. Coarse pointers keep + the taller row below (the 44px tablet target, C1). */ + .card.collapsed { padding-top: 5px; padding-bottom: 5px; } + @media (pointer: coarse) { + .card.collapsed { padding-top: 10px; padding-bottom: 10px; } + } .card.collapsed .section-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .card.collapsed .sub-heading { margin-bottom: 0; }