From 19d5a6a22c7f5bfbb52d0f9750ddedae9bbda463 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Dec 2025 10:55:39 -0600
Subject: [PATCH 1/2] Move nav and related elements above footer

---
 app/assets/stylesheets/_global.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 47f29691a..1a67e7a6e 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -74,12 +74,12 @@
   --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-bar: 50;
+  --z-tray: 51;
+  --z-welcome: 52;
+  --z-nav: 60;
+  --z-flash: 70;
+  --z-tooltip: 80;
 
   /* OKLCH colors: Fixed */
   --lch-black: 0% 0 0;

From 7f1bf76588140eec0a0409b9955f978b1d031c4c Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 29 Dec 2025 11:02:19 -0600
Subject: [PATCH 2/2] Only bump z-index when nav is open

---
 app/assets/stylesheets/_global.css | 7 ++++---
 app/assets/stylesheets/header.css  | 6 ++++++
 app/assets/stylesheets/layout.css  | 5 -----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 1a67e7a6e..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: 20;
+  --z-flash: 30;
+  --z-tooltip: 40;
   --z-bar: 50;
   --z-tray: 51;
   --z-welcome: 52;
-  --z-nav: 60;
-  --z-flash: 70;
-  --z-tooltip: 80;
+  --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;