From 24c1598e60bbb6a79519eea13a9de2b22b626c2a Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 31 Mar 2026 10:32:36 -0700
Subject: [PATCH] fix: contain MI bar z-index within header stacking context on
 mobile

On desktop the header is position:fixed which creates a stacking
context, containing the MI bar's z-index:10001. On mobile the header
switches to position:sticky without z-index, so no stacking context
is created and the MI bar's z-index leaks out above the tab row
(z-index:9998). Fix by adding z-index:9999 to the header on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 shared/components/rstack-mi.ts | 1 -
 website/public/shell.css       | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/shared/components/rstack-mi.ts b/shared/components/rstack-mi.ts
index 28f6e8f..44001a1 100644
--- a/shared/components/rstack-mi.ts
+++ b/shared/components/rstack-mi.ts
@@ -1100,7 +1100,6 @@ const STYLES = `
 }
 
 @media (max-width: 640px) {
-  .mi-bar { display: none; }
   .mi { max-width: none; width: 100%; }
   .mi-panel {
     position: fixed; top: 0; left: 0; right: 0; bottom: 0;
diff --git a/website/public/shell.css b/website/public/shell.css
index 7299842..94b29b7 100644
--- a/website/public/shell.css
+++ b/website/public/shell.css
@@ -361,6 +361,7 @@ body.rstack-sidebar-open #toolbar {
      the header wrap naturally to two rows. */
   .rstack-header {
     position: sticky;
+    z-index: 9999;
     padding: calc(6px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
     height: auto;
     flex-wrap: wrap;
@@ -374,8 +375,8 @@ body.rstack-sidebar-open #toolbar {
   .rstack-header__center {
     order: 3;
     flex-basis: 100%;
-    padding: 0;
-    display: none;
+    padding: 4px 0 2px;
+    display: flex;
   }
   .rstack-header__right {
     flex: 0 0 auto;