Ensure banner remains sticky

Author: paulrobertlloyd

public/assets/scripts/custom-elements/map.styles.js

@@ -2,7 +2,7 @@ import { css } from "lit";
 
 export default css`
   :host {
-    block-size: 100%;
+    block-size: 100dvh;
   }
 
   #map {

public/assets/styles/base/sections.css

@@ -11,6 +11,7 @@
 }
 
 html {
+  block-size: 100vh;
   text-size-adjust: none;
 
   &:focus-within {
@@ -24,16 +25,12 @@ html {
 
 body {
   background-color: var(--color-neutral-darkest);
-  block-size: 100dvh;
   color: var(--color-neutral-darkest);
   display: flex;
   flex-direction: column;
   font-family: var(--font-family-sans);
   margin: 0;
-
-  &:has(dialog#navigation[open]) {
-    overflow: hidden;
-  }
+  min-block-size: 100dvh;
 }
 
 h1,

public/assets/styles/components/banner.css

@@ -10,11 +10,15 @@
   display: grid;
   grid-template-areas: "masthead navigation search";
   grid-template-columns: auto 1fr auto;
-  padding-inline: calc(var(--page-gutter) - var(--space-s));
+  inset-block-start: 0;
+  padding-inline: calc(var(--page-gutter) - var(--space-xs));
+  position: sticky;
+  z-index: 99;
 
   &:has(h1) {
     grid-template-areas: "navigation search" "masthead masthead";
     grid-template-columns: auto;
+    position: static;
   }
 
   & div {