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 ────────────────────────────────────────────────────────────────────────