pin deadline banner above the sidebar and page

app/assets/stylesheets/components/_onboarding.scss

@@ -195,7 +195,7 @@ $onboarding-card-border: rgba(255, 255, 255, 0.5);
   justify-content: center;
   padding: 0.6rem 1rem;
   position: sticky;
-  top: 0;
+  top: var(--top-banner-height, 0px);
   z-index: 50;
   body.signed-in:not(.app-layout-page) & {
     margin-left: calc(-1 * var(--sidebar-reserved));

app/assets/stylesheets/components/_sidebar.scss

@@ -4,7 +4,7 @@
   --sidebar-inset-y: var(--space-s); // tiny top + bottom edges
 
   position: fixed;
-  top: var(--sidebar-inset-y);
+  top: calc(var(--sidebar-inset-y) + var(--top-banner-height, 0px));
   bottom: var(--sidebar-inset-y);
   left: var(--sidebar-inset);
   width: var(--sidebar-width);

app/assets/stylesheets/components/_top_banner.scss

@@ -18,8 +18,14 @@
   border-bottom: 2px solid #92400e;
 }
 
+// Pinned above everything, including the fixed sidebar. top_banner_controller
+// publishes its height so the page and sidebar start below it.
 .top-banner--announcement {
-  position: relative;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
   padding-inline: 2.5rem;
   text-align: center;
   background: var(--color-brand-yellow);

app/assets/stylesheets/layout/_base.scss

@@ -16,6 +16,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  padding-top: var(--top-banner-height, 0px);
 }
 
 main {

app/javascript/controllers/index.js

@@ -202,6 +202,9 @@ application.register("discover-rail-panel", DiscoverRailPanelController);
 import DismissableController from "./dismissable_controller";
 application.register("dismissable", DismissableController);
 
+import TopBannerController from "./top_banner_controller";
+application.register("top-banner", TopBannerController);
+
 import EmojiPickerController from "./emoji_picker_controller";
 application.register("emoji-picker", EmojiPickerController);
 

app/javascript/controllers/top_banner_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Publishes a fixed top banner's height as --top-banner-height so the page,
+// sidebar and sticky headers can sit below it. Cleared when the banner leaves.
+export default class extends Controller {
+  connect() {
+    this.observer = new ResizeObserver(() => this.publish());
+    this.observer.observe(this.element);
+    this.publish();
+  }
+
+  disconnect() {
+    this.observer?.disconnect();
+    document.documentElement.style.removeProperty("--top-banner-height");
+  }
+
+  publish() {
+    document.documentElement.style.setProperty(
+      "--top-banner-height",
+      `${this.element.offsetHeight}px`,
+    );
+  }
+}

app/views/layouts/application.html.erb

@@ -91,7 +91,7 @@
     <div class="top-banners">
       <% unless cookies[:deadline_extension_dismissed] %>
         <div class="top-banner top-banner--announcement" role="region" aria-label="announcement"
-             data-controller="dismissable" data-dismissable-cookie-value="deadline_extension_dismissed">
+             data-controller="dismissable top-banner" data-dismissable-cookie-value="deadline_extension_dismissed">
           <p class="top-banner__text">stardance has been extended another month! the new deadline is october 31 :)</p>
           <button type="button" class="top-banner__dismiss" aria-label="Dismiss announcement"
                   data-action="click->dismissable#dismiss">&times;</button>