From 69ace3514ef221ef8a097717eb965409eec5d976 Mon Sep 17 00:00:00 2001
From: Lann Martin <lmartin@akamai.com>
Date: Mon, 7 Sep 2026 19:58:30 -0400
Subject: [PATCH] Visor: the drawer opens above the strip, in flow

The strip always separates visor content from app content, so whatever
the visor opens goes on its side of that line and pushes the strip down
rather than covering the app. The "strip geometry immobile" gate that
justified the overlay in #171 is struck: from design.md M1, the page
comment, and the two e2e equality assertions (the 56px height check
stays).
---
 docs/design.md     |  4 +--
 e2e/run.ts         | 24 ++++---------
 visor/src/style.rs | 20 +++++------
 visor/src/ui.rs    | 87 +++++++++++++++++++++++-----------------------
 web/index.html     |  4 +--
 5 files changed, 62 insertions(+), 77 deletions(-)

diff --git a/docs/design.md b/docs/design.md
index ca4e2e43..77b0a187 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -448,8 +448,8 @@ native tests, so browser gates are mandatory for every visor change.
 - **M0** archive, skeleton, this record, both WIT packages, CI.
 - **M1** three realms, one TodoMVC: stub kernel with in-memory `tasks`;
   visor strip + settings sheet; frame loader under policy; ports.
-  Gates: app renders in the opaque frame; strip geometry immobile with
-  the app mounted; zero network requests from the frame; `jspi: false`;
+  Gates: app renders in the opaque frame; zero network requests from
+  the frame; `jspi: false`;
   the frame policy's unit tests. (The frame-teardown integration test
   waits for a hostile fixture component — M2. The path was exercised
   anyway: the policy caught the TodoMVC example's outbound `href`.)
diff --git a/e2e/run.ts b/e2e/run.ts
index fd9bfe61..e4adc756 100644
--- a/e2e/run.ts
+++ b/e2e/run.ts
@@ -1,7 +1,7 @@
 // The M1 gates on real Chromium (docs/design.md "Delivery": "Playwright on
 // real Chromium for every claim about pixels or realms", and "M1": "app
-// renders in the opaque frame; strip geometry immobile with the app mounted;
-// zero network requests from the frame; no JSPI").
+// renders in the opaque frame; zero network requests from the frame; no
+// JSPI").
 //
 // The server sets neither COOP nor COEP: a SharedWorker needs none, and
 // setting them would make this harness diverge from what a home origin
@@ -938,7 +938,6 @@ const scenarios: Scenario[] = [
       const page = await open(ctx, origin);
       await visorReady(page);
       const strip = page.locator("#visor-strip");
-      const before = await strip.boundingBox();
 
       await launchTodoMvc(page);
 
@@ -957,14 +956,10 @@ const scenarios: Scenario[] = [
       });
       check(!reachable, "the app frame's document was reachable from the page");
 
-      // Wait for the app to have actually painted before measuring: the
-      // claim is that a MOUNTED app does not move the strip.
+      // Wait for the app to have actually painted before measuring.
       await page.frameLocator("#app-zone iframe").locator("input").first()
         .waitFor({ timeout: 30_000 });
 
-      const after = await strip.boundingBox();
-      eq(after, before, "#visor-strip geometry moved when the app mounted");
-
       const plated = await strip.locator("q").first().textContent();
       eq(plated, "TodoMVC", "the strip's left half should plate the app title");
     },
@@ -1011,7 +1006,6 @@ const scenarios: Scenario[] = [
     async run(ctx, origin) {
       const page = await open(ctx, origin);
       await visorReady(page);
-      const before = await strip(page).boundingBox();
 
       // `apps/hostile` renders one `<script>`, which web/policy.ts's tag
       // table refuses. The rejection closes the mutation stream, the frame
@@ -1025,23 +1019,17 @@ const scenarios: Scenario[] = [
         { timeout: 5_000 },
       );
 
-      // Settle before measuring, and settle on facts rather than on a
-      // timeout: the strip's claim is about where it ends up. The drawer is
-      // no part of that any more — it overlays the app zone instead of
-      // pushing anything — so the baseline was taken with it open and the
-      // comparison is made with it open again, and neither is a special
-      // case. With nothing running the drawer is pinned on the app list, so
-      // the session ending puts it back there; the notice is read from it.
+      // Settle on facts rather than on a timeout: with nothing running the
+      // drawer is pinned on the app list, so the session ending puts it
+      // back there; the notice is read from it.
       const notice = page.locator("#visor-notice");
       await notice.getByText("ended", { exact: false }).waitFor({
         timeout: 10_000,
       });
 
-      // The trusted pixels do not move because an app misbehaved.
       const after = await strip(page).boundingBox();
       check(after !== null, "#visor-strip lost its box");
       eq(after!.height, 56, "#visor-strip height");
-      eq(after, before, "#visor-strip geometry moved when the session ended");
 
       // Framework voice for the reason, the app's own title plated: the
       // publisher's text never enters the sentence unquoted.
diff --git a/visor/src/style.rs b/visor/src/style.rs
index 186f75ae..d5b52027 100644
--- a/visor/src/style.rs
+++ b/visor/src/style.rs
@@ -42,11 +42,8 @@ pub(crate) const CSS: &str = r#"
   --field: oklch(0.88 0 0);
 }
 
-/* Fixed on all three axes so no content can push the anchor around, and
-   the one thing in this tree that is never overlaid: the drawer is
-   absolutely positioned below it rather than in flow, so opening anything
-   moves no pixel of the strip (docs/design.md M1: "strip geometry immobile
-   with the app mounted"). */
+/* Fixed height on all three axes so no content can push the anchor
+   around. */
 #visor-strip {
   box-sizing: border-box;
   height: 56px; min-height: 56px; max-height: 56px;
@@ -81,12 +78,13 @@ pub(crate) const CSS: &str = r#"
 .stack .top, .stack .bottom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .stack .bottom { font-size: 12px; }
 
-/* Everything below the strip is an overlay on the app zone, never a push:
-   the scrim covers the app, the drawer covers the scrim, and both start
-   exactly where the strip ends. */
-#visor-scrim { position: fixed; inset: 56px 0 0 0; z-index: 1; background: oklch(0 0 0 / 0.25); }
+/* The drawer is in normal flow, above the strip: it pushes the strip (and
+   the app zone under it) down when it opens rather than covering the app.
+   The scrim covers the app zone behind the strip and drawer alike, fixed
+   to the viewport since neither the strip nor the drawer moves it. */
+#visor-scrim { position: fixed; inset: 0; z-index: 1; background: oklch(0 0 0 / 0.25); }
 #visor-drawer {
-  position: absolute; top: 56px; left: 0; right: 0; z-index: 2;
+  position: relative; z-index: 2;
   box-sizing: border-box;
   height: min(60vh, 480px);
   overflow: hidden;
@@ -141,7 +139,7 @@ pub(crate) const CSS: &str = r#"
 /* Unsaved changes, over the drawer: the only thing in this tree that takes
    the press away from what raised it. */
 #visor-confirm {
-  position: absolute; top: 56px; left: 0; right: 0; z-index: 4;
+  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
   padding: 12px;
   box-sizing: border-box;
diff --git a/visor/src/ui.rs b/visor/src/ui.rs
index 9f87275a..a7aae1d7 100644
--- a/visor/src/ui.rs
+++ b/visor/src/ui.rs
@@ -8,10 +8,10 @@
 //! rendered by this one component so there is exactly one tree, and no
 //! ordering question about which of them the receiver mounts first.
 //!
-//! The drawer *overlays* the app zone rather than pushing anything: the
-//! strip is the line between trusted pixels and the app, so it never moves,
-//! in any drawer state (docs/design.md M1: "strip geometry immobile with
-//! the app mounted").
+//! The strip is the line between trusted pixels and the app zone, so
+//! whatever the visor opens goes on the visor's side of that line — above
+//! the strip — and pushes the strip, and the app zone under it, down
+//! rather than covering it.
 //!
 //! The visor holds no state of its own beyond what is on screen right now
 //! (docs/design.md "Visor and apps render through stream-dom"): identity,
@@ -987,16 +987,51 @@ pub(crate) fn Visor() -> Element {
     };
 
     rsx! {
-        // One positioned root, so the drawer can overlay the app zone
-        // instead of pushing it: the strip is the line between trusted
-        // pixels and the app, and a line that moves when the visor opens
-        // something is not a line (docs/design.md M1, "strip geometry
-        // immobile with the app mounted").
+        // One positioned root. The drawer is rendered before the strip so
+        // it sits in normal flow above it: the strip is the line between
+        // trusted pixels and the app zone, so whatever the visor opens goes
+        // on the visor's side of that line — above the strip — and pushes
+        // the strip, and the app zone under it, down rather than covering
+        // it.
         div { id: "visor-root", class: "{root_class}", style: painted,
             // The trusted pixels depend on nothing the page provides, so
             // the visor ships its own stylesheet as part of its own tree.
             style { "{CSS}" }
 
+            if let Some(t) = tenant {
+                // Only when there is something behind the drawer to
+                // dismiss back to. With nothing running the drawer is
+                // where the visor rests, and a scrim over an empty app
+                // zone would be a dismissal to nowhere.
+                if running {
+                    div { id: "visor-scrim", onclick: move |_| request.call(Action::Close) }
+                }
+                div {
+                    id: "visor-drawer",
+                    class: "{drawer_class}",
+                    onanimationend: move |_| {
+                        // `closing` is the whole discriminator: the bridge
+                        // reports no animation name, and the close path
+                        // drops any pane still sliding, so the drawer's own
+                        // animation is the only one that can be ending
+                        // under it while this is true.
+                        if closing() {
+                            closing.set(false);
+                            drawer.set(Drawer::Closed);
+                        }
+                    },
+                    if let Some((from, forward)) = leaving() {
+                        div {
+                            key: "{from:?}",
+                            class: if forward { "pane leave-to-left" } else { "pane leave-to-right" },
+                            onanimationend: move |_| leaving.set(None),
+                            {sheet_for(from, false)}
+                        }
+                    }
+                    div { key: "{t:?}", class: "{entering}", {sheet_for(t, true)} }
+                }
+            }
+
             div { id: "visor-strip",
                 // Left half: what is running. Both halves need a kernel
                 // that answers, so neither is offered before the seal
@@ -1058,40 +1093,6 @@ pub(crate) fn Visor() -> Element {
                 // request, never left standing in the strip.
             }
 
-            if let Some(t) = tenant {
-                // Only when there is something behind the drawer to
-                // dismiss back to. With nothing running the drawer is
-                // where the visor rests, and a scrim over an empty app
-                // zone would be a dismissal to nowhere.
-                if running {
-                    div { id: "visor-scrim", onclick: move |_| request.call(Action::Close) }
-                }
-                div {
-                    id: "visor-drawer",
-                    class: "{drawer_class}",
-                    onanimationend: move |_| {
-                        // `closing` is the whole discriminator: the bridge
-                        // reports no animation name, and the close path
-                        // drops any pane still sliding, so the drawer's own
-                        // animation is the only one that can be ending
-                        // under it while this is true.
-                        if closing() {
-                            closing.set(false);
-                            drawer.set(Drawer::Closed);
-                        }
-                    },
-                    if let Some((from, forward)) = leaving() {
-                        div {
-                            key: "{from:?}",
-                            class: if forward { "pane leave-to-left" } else { "pane leave-to-right" },
-                            onanimationend: move |_| leaving.set(None),
-                            {sheet_for(from, false)}
-                        }
-                    }
-                    div { key: "{t:?}", class: "{entering}", {sheet_for(t, true)} }
-                }
-            }
-
             // Unsaved changes, over the drawer that holds them. The three
             // answers are the three things a user could mean, and none of
             // them is "lose it quietly".
diff --git a/web/index.html b/web/index.html
index 2bed5eb7..ede7fcb2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -23,9 +23,7 @@
     }
     /* The visor sits at the top, where browsers put their own trusted UI,
        and out of thumb range on a handheld — app interactions are the
-       common case. Its geometry must not move when an app mounts
-       (docs/design.md "M1": "strip geometry immobile with the app
-       mounted"). */
+       common case. */
     #visor {
       flex: 0 0 auto;
     }