docs: keep --vp-layout-top-height in sync via ResizeObserver

jdx · claude · jdx · commit 5c6d2cf77062 · 2026-04-23T14:40:20.000-05:00
The height CSS variable was set once in a single rAF and never updated
afterward. On window resize, orientation change, or text reflow the
banner height could change, leaving the VitePress nav offset stale and
causing overlap or a visible gap. Observe the banner element and
resync the variable whenever its size changes; disconnect the observer
when the banner is dismissed.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/docs/.vitepress/theme/banner.js b/docs/.vitepress/theme/banner.js
@@ -43,23 +43,32 @@ function render(b) {
     el.appendChild(a);
   }
 
+  const syncHeight = () => {
+    document.documentElement.style.setProperty(
+      "--vp-layout-top-height",
+      `${el.offsetHeight}px`,
+    );
+  };
+
+  const observer =
+    typeof ResizeObserver !== "undefined"
+      ? new ResizeObserver(syncHeight)
+      : null;
+
   const btn = document.createElement("button");
   btn.type = "button";
   btn.setAttribute("aria-label", "Dismiss");
   btn.textContent = "\u00d7";
   btn.addEventListener("click", () => {
     localStorage.setItem(STORAGE_KEY, b.id);
+    observer?.disconnect();
     el.remove();
     document.documentElement.style.removeProperty("--vp-layout-top-height");
   });
   el.appendChild(btn);
 
   document.body.prepend(el);
 
-  requestAnimationFrame(() => {
-    document.documentElement.style.setProperty(
-      "--vp-layout-top-height",
-      `${el.offsetHeight}px`,
-    );
-  });
+  requestAnimationFrame(syncHeight);
+  observer?.observe(el);
 }
