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 <noreply@anthropic.com>
This commit is contained in:
@@ -491,7 +491,7 @@ deliberately deferred.
|
|||||||
- **Suggested wave or follow-up:** wave 9 backlog sweep (`T9.9`), verified with
|
- **Suggested wave or follow-up:** wave 9 backlog sweep (`T9.9`), verified with
|
||||||
the `tests/qa_gate_check.py` sink pattern.
|
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
|
- **Found during:** T7.2, re-measured at the wave 7 exit
|
||||||
- **Where:** `html/wp-creation-index.html` page chrome; `tests/form_structure_check.py`
|
- **Where:** `html/wp-creation-index.html` page chrome; `tests/form_structure_check.py`
|
||||||
|
|||||||
@@ -154,7 +154,7 @@
|
|||||||
after .main is what lets it be a sticky column without wrapping the layout. */
|
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; }
|
.wp-layout { display: flex; flex-direction: column; width: 100%; margin: 0; }
|
||||||
.main { min-width: 0; max-width: none; 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; }
|
transition: padding-left .18s ease; }
|
||||||
|
|
||||||
.section { display: none; }
|
.section { display: none; }
|
||||||
@@ -308,7 +308,7 @@
|
|||||||
.deliv-text .dt-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
.deliv-text .dt-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 1px; }
|
||||||
|
|
||||||
/* ── NAV ── */
|
/* ── 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 {
|
.btn {
|
||||||
padding: 10px 22px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; font-weight: 600;
|
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;
|
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; }
|
border-radius:var(--radius); padding:7px 10px; font-size:11px; }
|
||||||
|
|
||||||
/* ── CREATION TOOL ───────────────────────────────────────────────── */
|
/* ── 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; }
|
border-bottom:1px solid var(--border); background:var(--surface); flex-wrap:wrap; }
|
||||||
.ctx-empty { color:var(--text-muted); font-size:13px; }
|
.ctx-empty { color:var(--text-muted); font-size:13px; }
|
||||||
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
.ctx-main .ctx-proj { font-weight:700; color:var(--text); font-size:14px; }
|
||||||
@@ -575,7 +575,7 @@
|
|||||||
/* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
|
/* ── WORK PACKAGE FORM ───────────────────────────────────────────── */
|
||||||
.sop-hint { color:var(--accent) !important; }
|
.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 { 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; }
|
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-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); }
|
.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
|
/* 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 -
|
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. */
|
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 .section-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
|
||||||
.card.collapsed .sub-heading { margin-bottom: 0; }
|
.card.collapsed .sub-heading { margin-bottom: 0; }
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user