Update status banner height

Author: lanedirt

src/components/StatusBanner/StatusBannerBar.tsx

@@ -1,30 +1,46 @@
 "use client";
 
+import { useLayoutEffect, useRef } from "react";
 import StatusBannerClient from "./StatusBannerClient";
 import { useStatusBanner } from "./StatusBannerProvider";
 
 /**
- * Header slot: renders the full-width status strip once the async fetch in
- * StatusBannerProvider resolves, sliding it in from the top. Renders nothing
- * while there's no active banner, so it never blocks the initial paint.
+ * Renders the full-width status strip once the async fetch in StatusBannerProvider resolves.
  */
 export default function StatusBannerBar() {
-  const { banner, href, mounted, shown } = useStatusBanner();
+  const { banner, href, mounted, shown, setContentHeight } = useStatusBanner();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) {
+      return;
+    }
+    const update = () =>
+      setContentHeight(Math.ceil(el.getBoundingClientRect().height));
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [banner, shown, setContentHeight]);
+
   if (!mounted || !banner) {
     return null;
   }
   return (
     <div
-      className={`overflow-hidden transition-[height] duration-300 ease-out ${
-        shown ? "h-11" : "h-0"
-      }`}
+      className="grid transition-[grid-template-rows] duration-300 ease-out"
+      style={{ gridTemplateRows: shown ? "1fr" : "0fr" }}
     >
-      <div
-        className={`transition-all duration-300 ease-out ${
-          shown ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"
-        }`}
-      >
-        <StatusBannerClient banner={banner} href={href} variant="bar" />
+      <div className="min-h-0 overflow-hidden">
+        <div
+          ref={contentRef}
+          className={`transition-opacity duration-300 ease-out ${
+            shown ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <StatusBannerClient banner={banner} href={href} variant="bar" />
+        </div>
       </div>
     </div>
   );

src/components/StatusBanner/StatusBannerProvider.tsx

@@ -13,18 +13,25 @@ import type { StatusBanner } from "@/lib/status-banner";
 // - `banner`/`href`: the resolved banner (null when there's nothing to show).
 // - `mounted`: keep the DOM present through the slide-out, not just while active.
 // - `shown`: the transition target — false = collapsed (height 0), true = open.
+// - `contentHeight`/`setContentHeight`: (estimated) height of the banner content.
 export type StatusBannerContextValue = {
   banner: StatusBanner | null;
   href: string | null;
   mounted: boolean;
   shown: boolean;
+  contentHeight: number;
+  setContentHeight: (height: number) => void;
 };
 
+const DEFAULT_CONTENT_HEIGHT = 44;
+
 const StatusBannerContext = createContext<StatusBannerContextValue>({
   banner: null,
   href: null,
   mounted: false,
   shown: false,
+  contentHeight: DEFAULT_CONTENT_HEIGHT,
+  setContentHeight: () => {},
 });
 
 export function useStatusBanner(): StatusBannerContextValue {
@@ -58,6 +65,7 @@ export default function StatusBannerProvider({
   } | null>(null);
   const [mounted, setMounted] = useState(false);
   const [shown, setShown] = useState(false);
+  const [contentHeight, setContentHeight] = useState(DEFAULT_CONTENT_HEIGHT);
 
   useEffect(() => {
     let cancelled = false;
@@ -114,6 +122,8 @@ export default function StatusBannerProvider({
     href: data?.href ?? null,
     mounted,
     shown,
+    contentHeight,
+    setContentHeight,
   };
 
   return (

src/components/StatusBanner/StatusBannerSpacer.tsx

@@ -9,16 +9,15 @@ import { useStatusBanner } from "./StatusBannerProvider";
  * duration) so content slides down smoothly instead of jumping.
  */
 export default function StatusBannerSpacer() {
-  const { mounted, shown } = useStatusBanner();
+  const { mounted, shown, contentHeight } = useStatusBanner();
   if (!mounted) {
     return null;
   }
   return (
     <div
       aria-hidden
-      className={`transition-[height] duration-300 ease-out ${
-        shown ? "h-11" : "h-0"
-      }`}
+      className="transition-[height] duration-300 ease-out"
+      style={{ height: shown ? contentHeight : 0 }}
     />
   );
 }