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>
This commit is contained in:
Jeff Emmett 2026-03-31 10:32:36 -07:00
parent 6c7c00dc95
commit 24c1598e60
2 changed files with 3 additions and 3 deletions

View File

@ -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;

View File

@ -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;