From 4d3258113a307de790ee919d5adb0ca9441fbd41 Mon Sep 17 00:00:00 2001
From: "n.siegfried" <n.siegfried@prime-controls.com>
Date: Fri, 14 Aug 2026 18:40:28 -0500
Subject: [PATCH] T1.4 - F4: the comments drawer opens below the header, not
 under it

Containing block first, as the task asks. The drawer is a body child with no
transformed ancestor, so its containing block was already the viewport - the
positioning context was never wrong. What was wrong was `top: 0` with
`height: 100vh`: the drawer started at the very top of the viewport, and the
creator's .header is sticky with z-index:100 against the drawer's 61. The
header won, so the drawer's own head - its title and its close button - was
roofed over and unreachable. It read as "off-screen" because the part you
needed was covered, not because the box had escaped the viewport.

That is why raising z-index would have been the wrong move: it does not remove
the collision, it just swaps which element is on top, and then the drawer
covers the header instead. The fix is to stop them occupying the same band.
The drawer now starts at var(--rail-top) and is that much shorter. --rail-top
is the header's measured height, set by wp-creation-app.js:1328 and already
used by .wp-nav for exactly this purpose, so "below the header" has one
definition on this page rather than two.

The iframe boundary is NOT implicated. position:fixed inside the embedded
creator resolves against the iframe's own viewport, which is self-consistent,
and the drawer behaves identically framed and unframed. T7.1 can dissolve the
boundary without revisiting this.

The probe was checking one width, one mode, and placement only. It now checks
390 and 1440, standalone and embedded, that the close button is genuinely
hit-testable via elementFromPoint rather than merely present, that the drawer
reopens after closing, and that opening it does not move the page's scroll
position. All pass.

One honest caveat, attributed rather than hidden. At 390px the drawer sits at
the right edge of a 485px layout viewport while the screen is 390px, so 95px of
it is off-screen. That is not the drawer: the creator forces its containing
block to 485px, and while chasing it I found BL-001's root cause -
wp-creation-app.js:1389 injects `body{--nav-w:288px}` with no media query,
which lands after wp-creation-styles.css:815's
`@media (max-width:860px){body{--nav-w:56px}}` and overrides it, so the page
reserves 288px of rail that is not there at any width. Every `right: 0` fixed
element on the page is displaced by it, not only this one.

Left unfixed on purpose - it is the creator's layout, T7.1 rebuilds it, and
CLAUDE.md is explicit about not fixing things noticed in passing. BL-001 now
carries the exact cause and the five rules that consume the token, so T7.1 does
not have to find it again. The probe reports it as an attributed note naming
BL-001, so nobody is sent to the wrong file.

browser_check 71/71. f_items: F1, F2, F3, F4 FIXED.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/waves/backlog.md       |  17 ++++++
 html/wp-creation-styles.css |  12 +++-
 tests/f_items.py            | 112 ++++++++++++++++++++++++++----------
 3 files changed, 109 insertions(+), 32 deletions(-)

diff --git a/docs/waves/backlog.md b/docs/waves/backlog.md
index bcccf7f..b1df240 100644
--- a/docs/waves/backlog.md
+++ b/docs/waves/backlog.md
@@ -67,6 +67,23 @@ deliberately deferred.
   rebuilds its layout regardless — fixing it in wave 1 would be thrown away.
 - **Suggested wave or follow-up:** verify it is gone at `T7.1`; if it survives the rebuild,
   it needs its own item in the next revision.
+- **Root cause, found at T1.4 — not fixed, T7.1 owns it.** `wp-creation-styles.css:815` has
+  `@media (max-width: 860px) { body { --nav-w: 56px; } }`, which is correct. But
+  `wp-creation-app.js:1389` injects `body{--nav-w:288px;}` into a runtime `<style>` with no
+  media query. Injected last, same specificity, so it **wins over the media query** and
+  `--nav-w` stays 288px at every width. Everything keyed off it then reserves 288px of
+  rail that is not there: `.main` padding-left `calc(288px + 28px)`
+  (`wp-creation-styles.css:109`), `.ctx-bar` (`:452`), `.release-banner` (`:488`),
+  `.section-nav-bar` (`:596`) and `.sticky-save { left: var(--nav-w,288px) }` (`:820`).
+  At a 390px screen that forces the initial containing block to 485px.
+  The fix is to give the injected rule the same breakpoint, or to stop injecting the
+  value that the stylesheet already declares — one line, but it belongs with the creator
+  rebuild rather than in a wave 1 rendering task.
+- **Consequence for `F4`:** every `position: fixed; right: 0` element on this page sits at
+  the right edge of that 485px box, which is 95px off the visible 390px screen. The
+  comments drawer is placed correctly relative to its containing block; the containing
+  block is wrong. `T1.4` reports this as an attributed note rather than a drawer defect,
+  so nobody is sent to the wrong file.
 - **Update, T1.2:** the 1440px half of this is **resolved as a side effect**, not by intent.
   The unbreakable `#wp-usermenu` run that `T1.2` fixed was the cause of four of the five
   overflows recorded in wave 0 — launcher, SOP wizard and field view at 390px, and the
diff --git a/html/wp-creation-styles.css b/html/wp-creation-styles.css
index a976737..6378e67 100644
--- a/html/wp-creation-styles.css
+++ b/html/wp-creation-styles.css
@@ -388,7 +388,17 @@
   .cmt-overlay { position:fixed; inset:0; background:rgba(20,30,50,.28); opacity:0; pointer-events:none;
     transition:opacity .2s ease; z-index:60; }
   .cmt-overlay.open { opacity:1; pointer-events:auto; }
-  .cmt-drawer { position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw; background:var(--surface);
+  /* Starts below the header, not behind it. The containing block was already the
+     viewport (this is a body child, no transformed ancestor), so `top:0` put the
+     drawer's own head — its title and its ✕ — underneath the sticky .header, which
+     carries z-index:100 against the drawer's 61 and therefore won. The drawer was
+     not off-screen so much as roofed over, and the close button was unreachable.
+     Raising z-index would have put the panel OVER the header instead, which is the
+     same collision with the layers swapped. --rail-top is the header's measured
+     height, set by wp-creation-app.js:1328 and already used by .wp-nav for exactly
+     this — reusing it keeps one definition of "below the header". */
+  .cmt-drawer { position:fixed; top:var(--rail-top,48px); right:0; height:calc(100vh - var(--rail-top,48px));
+    width:380px; max-width:92vw; background:var(--surface);
     border-left:1px solid var(--border); box-shadow:var(--shadow-lg); transform:translateX(100%);
     transition:transform .24s ease; z-index:61; display:flex; flex-direction:column; }
   .cmt-drawer.open { transform:translateX(0); }
diff --git a/tests/f_items.py b/tests/f_items.py
index a9187ae..3f0624c 100644
--- a/tests/f_items.py
+++ b/tests/f_items.py
@@ -274,47 +274,97 @@ def f4(page, base, tok):
     """Comments drawer renders off-screen and over the header in the STANDALONE
     creator (no ?embedded=1). Threshold: once open, the drawer's box sits wholly or
     partly outside the viewport, or intersects the header."""
-    page.clear_cookies()
-    page.set_cookie("wp_session", tok["root"])
-    page.viewport(1440)
-    page.goto(base + "/wp-creation-index.html?project=projA",
-              wait_for="!!document.querySelector('#cmt-drawer')")
-    time.sleep(0.8)
-    before = rect(page, "#cmt-drawer")
-    if not before:
-        return report("F4", UNKNOWN, "#cmt-drawer not found")
-    try:
-        page.click("#comments-btn", settle=0.9)
-    except Exception:
-        page.eval("typeof toggleComments==='function'?(toggleComments(),true):false")
-        time.sleep(0.9)
-
-    got = page.eval("""(function(){
+    MEASURE = """(function(){
       var d=document.querySelector('#cmt-drawer'); if(!d) return 'null';
       var r=d.getBoundingClientRect();
       var vw=document.documentElement.clientWidth, vh=document.documentElement.clientHeight;
       var open=d.classList.contains('open')||d.getAttribute('aria-hidden')==='false';
-      var hdr=document.querySelector('.wp-appbar,.header,header');
+      var hdr=document.querySelector('.header,.wp-appbar,header');
       var ov=null;
       if(hdr){var h=hdr.getBoundingClientRect();
         var ox=Math.min(r.right,h.right)-Math.max(r.left,h.left);
         var oy=Math.min(r.bottom,h.bottom)-Math.max(r.top,h.top);
         if(ox>2&&oy>2) ov=Math.round(ox)+'x'+Math.round(oy);}
+      // The head carries the title and the close button. If it is not hit-testable
+      // the drawer is unusable however tidy its box looks.
+      var head=d.querySelector('.cmt-head'), x=d.querySelector('.cmt-x'), reach=null;
+      if(x){var q=x.getBoundingClientRect();
+        var top=document.elementFromPoint(Math.round(q.left+q.width/2), Math.round(q.top+q.height/2));
+        reach = !!(top && (top===x || x.contains(top)));}
+      // A page whose layout viewport is wider than the screen puts every `right:0`
+      // fixed element off the visible area, drawer included. That is the page's
+      // overflow, not the drawer's placement, so it is reported separately -
+      // blaming the drawer for it sends the next person to the wrong file.
+      var icb=window.innerWidth;
       return JSON.stringify({open:open,x:Math.round(r.x),right:Math.round(r.right),
-        w:Math.round(r.width),vw:vw,vh:vh,offscreen:(r.right>vw+2||r.x<-2),overHeader:ov});})()""")
-    if got == "null":
-        return report("F4", UNKNOWN, "#cmt-drawer vanished after toggle")
-    d = json.loads(got)
-    if not d["open"]:
-        return report("F4", UNKNOWN, "drawer did not open; cannot judge placement")
-    bad = []
-    if d["offscreen"]:
-        bad.append(f"box {d['x']}-{d['right']} outside a {d['vw']}px viewport")
-    if d["overHeader"]:
-        bad.append(f"overlaps the header by {d['overHeader']}px")
-    if bad:
-        return report("F4", REPRO, "standalone creator: " + "; ".join(bad))
-    return report("F4", FIXED, f"drawer fully on screen ({d['x']}-{d['right']} of {d['vw']}px), clear of the header")
+        top:Math.round(r.top),bottom:Math.round(r.bottom),vw:vw,vh:vh,icb:icb,
+        offscreen:(r.right>icb+2||r.x<-2||r.top<-2||r.bottom>vh+2),
+        overHeader:ov, closeReachable:reach,
+        headH: head?Math.round(head.getBoundingClientRect().height):0});})()"""
+
+    def toggle():
+        try:
+            page.click("#comments-btn", settle=0.9)
+        except Exception:
+            page.eval("typeof toggleComments==='function'?(toggleComments(),true):false")
+            time.sleep(0.9)
+
+    problems, notes = [], []
+    for mode, qs in (("standalone", ""), ("embedded", "&embedded=1")):
+        for w in (390, 1440):
+            page.clear_cookies()
+            page.set_cookie("wp_session", tok["root"])
+            page.viewport(w, 900, mobile=(w <= 500))
+            page.goto(base + f"/wp-creation-index.html?project=projA{qs}",
+                      wait_for="!!document.querySelector('#cmt-drawer')")
+            time.sleep(1.0)
+            # Scroll down first: the drawer must not cost the user their place.
+            page.eval("window.scrollTo(0, 600); true")
+            time.sleep(0.3)
+            before_y = page.eval("Math.round(window.scrollY)")
+
+            toggle()
+            m = page.eval(MEASURE)
+            if m == "null":
+                problems.append(f"{mode}@{w}: #cmt-drawer missing")
+                continue
+            d = json.loads(m)
+            if not d["open"]:
+                notes.append(f"{mode}@{w}: did not open")
+                continue
+            if d["offscreen"]:
+                problems.append(f"{mode}@{w}: box {d['x']}-{d['right']} x {d['top']}-{d['bottom']} "
+                                f"outside {d['icb']}x{d['vh']}")
+            elif d["icb"] > w + 2:
+                # Compared against the width we ASKED for, not clientWidth, which is
+                # short by the scrollbar and would flag every page as overflowing.
+                notes.append(f"{mode}@{w}: correctly at the right edge of a {d['icb']}px layout "
+                             f"viewport, but the screen is {w}px - page overflow, BL-001")
+            if d["overHeader"]:
+                problems.append(f"{mode}@{w}: overlaps the header by {d['overHeader']}px")
+            if d["closeReachable"] is False:
+                problems.append(f"{mode}@{w}: close button covered by another element")
+
+            # close, reopen, and check the page did not jump
+            toggle()
+            time.sleep(0.4)
+            toggle()
+            m2 = json.loads(page.eval(MEASURE))
+            if not m2["open"]:
+                problems.append(f"{mode}@{w}: did not reopen")
+            elif m2["offscreen"] or m2["overHeader"]:
+                problems.append(f"{mode}@{w}: misplaced after reopen")
+            after_y = page.eval("Math.round(window.scrollY)")
+            if abs(after_y - before_y) > 4:
+                problems.append(f"{mode}@{w}: scroll moved {before_y}->{after_y}")
+            toggle()
+
+    if problems:
+        return report("F4", REPRO, "; ".join(problems[:4]))
+    if len(notes) >= 4:
+        return report("F4", UNKNOWN, "drawer never opened: " + "; ".join(notes[:2]))
+    detail = "on screen, clear of the header, reopens, scroll kept - at 390 and 1440, standalone and embedded"
+    return report("F4", FIXED, detail + (f" ({'; '.join(notes)})" if notes else ""))
 
 
 # ── F5 ────────────────────────────────────────────────────────────────────────