diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 47f29691a..25bc18277 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -74,12 +74,13 @@
   --z-events-column-header: 1;
   --z-events-day-header: 3;
   --z-popup: 10;
-  --z-nav: 30;
-  --z-flash: 40;
-  --z-tooltip: 50;
-  --z-bar: 60;
-  --z-tray: 61;
-  --z-welcome: 62;
+  --z-nav: 20;
+  --z-flash: 30;
+  --z-tooltip: 40;
+  --z-bar: 50;
+  --z-tray: 51;
+  --z-welcome: 52;
+  --z-nav-open: 100;
 
   /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;
diff --git a/app/assets/stylesheets/header.css b/app/assets/stylesheets/header.css
index 21553e358..c29b21518 100644
--- a/app/assets/stylesheets/header.css
+++ b/app/assets/stylesheets/header.css
@@ -15,6 +15,8 @@
     max-inline-size: 100dvw;
     padding-block: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--block-space-half);
     padding-inline: var(--main-padding);
+    position: relative;
+    z-index: var(--z-nav);
 
     /* Change the grid size depending on how many buttons are present */
     &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
@@ -25,6 +27,10 @@
       row-gap: 0;
     }
 
+    &:has(dialog[open]) {
+      z-index: var(--z-nav-open);
+    }
+
     &:has(~ #main .card-columns) {
       inline-size: 100dvw;
       margin-inline: auto;
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index e82992dfc..b9f8d6367 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -22,11 +22,6 @@
     max-inline-size: 100dvw;
   }
 
-  :where(#header) {
-    position: relative;
-    z-index: var(--z-nav);
-  }
-
   :is(#header, #footer) {
     @media print {
       display: none;