Merge pull request #2269 from basecamp/negotioate-z-index

Move nav and related elements above footer

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;

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;

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;