Event banner also a popup/flyout

assets/js/app.js

@@ -382,10 +382,11 @@ export function UTCIForecast() {
           <span></span><span></span><span></span>
         </button>
       </nav>
-      <main class="utci-shell">
 
-        
-        <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
+      <!-- Event flyout — a direct child of .utci-app (sibling of the nav) so its
+           position:fixed / z-index can sit above the nav. Keeping it inside
+           .utci-shell would trap it in the shell's stacking context. -->
+      <div class=${`event-banner-wrap${bannerVisible ? ' visible' : ''}`}>
           ${activeEvents.length > 0 && (() => {
             const renderSlide = (idx, isOutgoing) => {
               const ev = activeEvents[idx] || activeEvents[0];
@@ -406,6 +407,9 @@ export function UTCIForecast() {
               return html`
                 <div class=${isOutgoing ? 'event-banner event-banner--outgoing' : 'event-banner'}
                   style=${{ background: ev.color, color: ev.textColor }}
+                  onClick=${isOutgoing ? undefined : () => dismissBanner(ev.id)}
+                  role=${isOutgoing ? undefined : 'button'}
+                  title=${isOutgoing ? undefined : 'Click to dismiss'}
                 >
                   <span class="event-banner-emoji">${ev.emoji}</span>
                   <div class="event-banner-body">
@@ -422,7 +426,7 @@ export function UTCIForecast() {
                           <span
                             key=${i}
                             class=${`event-banner-dot${i === bannerIndex ? ' active' : ''}`}
-                            onClick=${() => bannerSlideTo(i)}
+                            onClick=${(e) => { e.stopPropagation(); bannerSlideTo(i); }}
                             style=${{ background: ev.textColor }}
                           />
                         `)}
@@ -432,7 +436,7 @@ export function UTCIForecast() {
                   ${!isOutgoing && html`<button
                     class="event-banner-dismiss"
                     style=${{ color: ev.textColor }}
-                    onClick=${() => dismissBanner(ev.id)}
+                    onClick=${(e) => { e.stopPropagation(); dismissBanner(ev.id); }}
                     aria-label="Dismiss"
                     title="Dismiss this event"
                   >✕</button>`}
@@ -448,6 +452,7 @@ export function UTCIForecast() {
           })()}
         </div>
 
+      <main class="utci-shell">
         <div class="utci-header">
           <div class="header-left">
             <h1 class="utci-title">

assets/js/hooks/useAppState.js

@@ -557,65 +557,10 @@ export function useAppState() {
     if (bannerIndex >= activeEvents.length) setBannerIndex(0);
   }, [activeEvents.length]);
 
-  // ── BANNER POSITION + SHELL PADDING ───────────────────────────────────
-  // The banner is position:absolute so it floats over content. We (1) pin its
-  // top to the bottom edge of the site-nav so it sits flush below the nav on
-  // every screen size, and (2) add matching padding-top to the shell so the
-  // page content sits just below the banner.
-  // On close: keep the banner pinned to the nav and animate the padding back
-  // to 0 so content slides up smoothly as the banner collapses.
-  const bannerMaxHeightRef = useRef(0);
-
-  useEffect(() => {
-    const shell = document.querySelector('.utci-shell');
-    const wrap  = document.querySelector('.event-banner-wrap');
-    if (!shell || !wrap) return;
-
-    // The site-nav's outer height is the banner's resting top edge. The banner
-    // lives inside the shell, so translate that into the shell's coordinate
-    // space by subtracting the shell's own offset from the page top.
-    const bannerTop = () => {
-      const navEl = document.getElementById('site-nav');
-      const navOuterHeight = navEl ? navEl.offsetHeight : 0;
-      return navOuterHeight - shell.offsetTop;
-    };
-
-    if (!bannerVisible) {
-      // Keep the collapsing banner pinned to the nav's bottom edge, and animate
-      // padding back to zero matching the banner collapse duration.
-      wrap.style.top = bannerTop() + 'px';
-      shell.style.transition = 'padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1)';
-      shell.style.paddingTop = '0px';
-      const tid = setTimeout(() => {
-        shell.style.transition = '';
-        shell.style.paddingTop = '';
-        bannerMaxHeightRef.current = 0;
-      }, 500);
-      return () => clearTimeout(tid);
-    }
-
-    const applyPadding = (allowShrink = false) => {
-      const top = bannerTop();
-      wrap.style.top = top + 'px';
-      const h = top + wrap.getBoundingClientRect().height;
-      if (allowShrink || h > bannerMaxHeightRef.current) {
-        bannerMaxHeightRef.current = h;
-        shell.style.transition = '';   // no transition while open/resizing
-        shell.style.paddingTop = h + 'px';
-      }
-    };
-
-    // Pin the banner immediately so it appears flush under the nav, then size
-    // the content padding once the open animation settles.
-    wrap.style.top = bannerTop() + 'px';
-    const onResize = () => applyPadding(true);
-    const tid = setTimeout(applyPadding, 460);
-    window.addEventListener('resize', onResize);
-    return () => {
-      clearTimeout(tid);
-      window.removeEventListener('resize', onResize);
-    };
-  }, [bannerVisible, bannerIndex, activeEvents.length]);
+  // The banner is now a position:fixed flyout pinned to the very top of the
+  // screen (see .event-banner-wrap in ui.css). It floats over all content and
+  // slides in/out via a transform, so no JS nav-pinning or shell padding is
+  // needed.
 
   // ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
   return {