← back to Quadrille Showroom
5x sweep 1: fix duplicate id=density-wrap (7x → class); document sort/density-in-dock false-positives
604475ec9856f7543eaaa6ca1f56ce049235b731 · 2026-07-01 10:02:34 -0700 · Steve
Six-way verify: 5/6 + 0 console errors. The 2 clickthrough/E2E failures are false positives —
#bottom-bar and #window-bar(sort/density) are intentionally stowed into the hamburger dock at boot
(dock.js progressive-disclosure UX), verified reachable via ☰→Controls with zero console errors.
Real defect fixed: 7 duplicate density-wrap ids → .density-wrap class + CSS selector update.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Files touched
M 5x/sweep-1.mdM public/showroom.html
Diff
commit 604475ec9856f7543eaaa6ca1f56ce049235b731
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Jul 1 10:02:34 2026 -0700
5x sweep 1: fix duplicate id=density-wrap (7x → class); document sort/density-in-dock false-positives
Six-way verify: 5/6 + 0 console errors. The 2 clickthrough/E2E failures are false positives —
#bottom-bar and #window-bar(sort/density) are intentionally stowed into the hamburger dock at boot
(dock.js progressive-disclosure UX), verified reachable via ☰→Controls with zero console errors.
Real defect fixed: 7 duplicate density-wrap ids → .density-wrap class + CSS selector update.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
5x/sweep-1.md | 40 +++++++++++++++++++++++++++++-----------
public/showroom.html | 18 +++++++++---------
2 files changed, 38 insertions(+), 20 deletions(-)
diff --git a/5x/sweep-1.md b/5x/sweep-1.md
index 1fe0a0a..465b0d2 100644
--- a/5x/sweep-1.md
+++ b/5x/sweep-1.md
@@ -1,14 +1,32 @@
-# /5x sweep 1 — http://127.0.0.1:7690/
+# /5x — Sweep 1 (http://127.0.0.1:7690)
-## Six-way
-- M1 HTTP contract: PASS (note: no-creds→200, localhost auth-exempt — not a defect)
-- M2 headless render: PASS (17KB screenshot)
-- M3 automation E2E: **FAIL** — `#guided-bar` resolved HIDDEN 21× (waitForSelector visible timeout 8s)
-- B4 Chrome / B5 Safari / B6 Firefox: PASS (visual open)
+## Six-way result: 5/6 passed, 1 failed (clickthrough), 0 console errors
-## Clickthrough
-- sort-select selectOption('natural'|'newest'|'title'|'sku'|'book'): **FAIL** — 30s timeout each
+| Pass | Layer | Result |
+|------|-------|--------|
+| M1 HTTP contract | request | PASS (200 text/html) |
+| M2 headless render | render | PASS (screenshot 24KB) |
+| M3 automation E2E | interaction | FAIL — `#bottom-bar` never visible |
+| B4 Chrome | cross-browser | PASS |
+| B5 Safari | cross-browser | PASS |
+| B6 Firefox | cross-browser | PASS |
+| Clickthrough sort-select ×5 | controls | FAIL — selectOption timeout |
-## To diagnose before fixing (real fix only)
-1. Is `#guided-bar` *supposed* to be visible on load, or hidden until guided focus? (app bug vs wrong ready-selector)
-2. Is the sort `<select>` hidden, or do its real option values differ from the clickthrough's guesses?
+## Diagnosis (empirical, via Chrome-channel Playwright probes)
+Both failures are **FALSE POSITIVES from the app's intentional progressive-disclosure boot UX**, not build defects:
+- Boot = clean "just-a-hamburger" first-person doorway screen. dock.js **stows** `#bottom-bar`
+ (in STOW_ONLY) → M3's assertion targeted an intentionally-hidden element.
+- `#window-bar` (sort + density + pager) is a dock.js **LAUNCHABLE PANEL labeled "Controls"**
+ (dock.js:29) — stowed at boot, re-opens as a movable modal from **☰ → Controls**. The
+ clickthrough drove `#sort-select` while it was `display:none` inside the stowed panel → 30s timeout.
+- Probe evidence: `#window-bar` has `class="qh-stowed"`; body is `explore-mode book-mode`;
+ **zero console/page errors** across boot + hamburger open + Open Board.
+
+## Real defect found & FIXED
+- `id="density-wrap"` was **duplicated 7×** (invalid HTML). Converted all 7 to `class="density-wrap"`
+ and updated the two CSS rules (`#density-wrap` → `.density-wrap`). No JS referenced the id (safe).
+
+## Open design question for Steve (NOT auto-changed)
+Standing rule: "every product grid MUST have sort + density, side-by-side above the grid." Here they're
+compliant-in-spirit (present + reachable) but docked in ☰→Controls rather than always-visible above the
+grid. Left as-is — changing the intentional clean-boot UX is a design call, not a /5x auto-fix.
diff --git a/public/showroom.html b/public/showroom.html
index f862747..21e3f2b 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -160,8 +160,8 @@
#window-bar button:hover { background:rgba(201,169,110,.2); }
#window-bar button:disabled { opacity:.35; cursor:default; }
#window-label { min-width:120px; text-align:center; color:var(--qh-gold); font-variant-numeric:tabular-nums; }
- #density-wrap { display:flex; align-items:center; gap:6px; }
- #density-wrap input { width:64px; }
+ .density-wrap { display:flex; align-items:center; gap:6px; }
+ .density-wrap input { width:64px; }
/* Mobile touch d-pad — hidden on desktop, shown on coarse pointers */
#dpad { position:fixed; right:18px; bottom:90px; z-index:30; display:none;
grid-template-columns:repeat(3,44px); grid-template-rows:repeat(3,44px); gap:4px; }
@@ -315,27 +315,27 @@
<option value="sku">SKU A→Z</option>
<option value="book">Book</option>
</select>
- <span id="density-wrap" title="Wings per wall">
+ <span class="density-wrap" title="Wings per wall">
<span>Boards</span><input type="range" id="density-range" min="10" max="50" step="2" value="50">
</span>
- <span id="density-wrap" title="Open-board angle (0°=flat, dead-on)">
+ <span class="density-wrap" title="Open-board angle (0°=flat, dead-on)">
<span>Wing°</span><input type="range" id="angle-range" min="0" max="90" step="5" value="8"><span id="angle-val">8°</span>
</span>
- <span id="density-wrap" title="How much of each closed board's pattern shows — wider edges = fewer boards, thinner slivers = more boards in the arc">
+ <span class="density-wrap" title="How much of each closed board's pattern shows — wider edges = fewer boards, thinner slivers = more boards in the arc">
<span>Reveal</span><input type="range" id="reveal-range" min="0" max="100" step="5" value="70"><span id="reveal-val">70</span>
</span>
- <span id="density-wrap" title="Open angle of the resting middle board (45° = the boot hero rake)">
+ <span class="density-wrap" title="Open angle of the resting middle board (45° = the boot hero rake)">
<span>Open°</span><input type="range" id="open-range" min="20" max="90" step="5" value="45"><span id="open-val">45°</span>
</span>
<!-- ADJUSTABLE ROOM (Phase 2) — Width / Height / Depth sliders. Tears down + rebuilds
the room shell + wing arc + active room-type furniture via resizeRoom(w,d,h). -->
- <span id="density-wrap" title="Room width (metres)">
+ <span class="density-wrap" title="Room width (metres)">
<span>W</span><input type="range" id="room-w-range" min="3" max="14" step="0.2" value="6.1"><span id="room-w-val">6.1m</span>
</span>
- <span id="density-wrap" title="Room depth (metres)">
+ <span class="density-wrap" title="Room depth (metres)">
<span>D</span><input type="range" id="room-d-range" min="3" max="14" step="0.2" value="6.1"><span id="room-d-val">6.1m</span>
</span>
- <span id="density-wrap" title="Room height (metres)">
+ <span class="density-wrap" title="Room height (metres)">
<span>H</span><input type="range" id="room-h-range" min="2.2" max="6" step="0.1" value="2.9"><span id="room-h-val">2.9m</span>
</span>
</div>
← bb091f8 Age View Phase-5.5 (contrarian pass): coalesce avatar rebuil
·
back to Quadrille Showroom
·
5x: REPORT.md — six-way GREEN after sweep 2 (6/6, 0 console 682e04f →