Fix docs iframe height blocking article navigation (#1997)

frontend/styles.css

@@ -116,17 +116,60 @@
   }
 }
 
+:root {
+  --header-height: 41px;
+  --version-alert-height: 0px;
+}
+
+html:has(#docsiframe):has(.version_alert) {
+  overflow-y: auto;
+}
+
+html:has(#docsiframe) .header-menu-bar.topnavbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+html:has(#docsiframe) .bg-white:has(.version_alert),
+html:has(#docsiframe) .version_alert {
+  position: fixed;
+  top: var(--header-height, 41px);
+  left: 0;
+  right: 0;
+  z-index: 999;
+  width: 100%;
+}
+
+html:has(#docsiframe):has(.version_alert) {
+  --version-alert-height: 32px;
+}
+
+html:has(#docsiframe) body {
+  padding-top: calc(var(--header-height, 41px) + var(--version-alert-height, 0px));
+}
+
 #docsiframe {
-  @apply w-full mx-0 my-auto overflow-hidden p-0;
+  @apply w-full mx-0 my-auto overflow-hidden p-0 mt-[1px];
-  height: calc(100vh - 2.6rem)
+  height: calc(100vh - var(--header-height, 41px) - var(--version-alert-height, 0px)); /* Fallback for older browsers*/
+  height: calc(100svh - var(--header-height, 41px) - var(--version-alert-height, 0px));
+  max-height: calc(100svh - var(--header-height, 41px) - var(--version-alert-height, 0px));
 }
 
 .version_alert {
-  @apply py-2 px-3 mt-2 mb-3 text-center rounded-sm bg-yellow-200/70
+  @apply py-2 px-3 mt-2 mb-3 text-center rounded-sm bg-yellow-200/70;
 }
+
+html:has(#docsiframe) .version_alert {
+  @apply py-1 px-3 mt-0 text-center rounded-sm bg-yellow-200/70;
+}
+
 .version_alert p {
   @apply p-0 m-0 text-center;
 }
+
 .version_alert a {
-  @apply font-semibold underline dark:text-white text-charcoal
+  @apply font-semibold underline dark:text-white text-charcoal;
 }

templates/docsiframe.html

@@ -11,7 +11,7 @@
 
 {% block content %}
     {# alert for non-current Boost versions #}
-    <div class="bg-white dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700 py-1">
+    <div class="bg-white dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
       {% include "libraries/includes/version_alert.html" %}
     </div>
     <iframe
@@ -25,6 +25,33 @@
         id="docsiframe"
     ></iframe>
     <script>
+      function updateVersionAlertHeight() {
+        const alert = document.querySelector('.version_alert');
+        if (alert && document.getElementById('docsiframe')) {
+          document.documentElement.style.setProperty('--version-alert-height', Math.ceil(alert.getBoundingClientRect().height) + 'px');
+        }
+      }
+
+      (function() {
+        const alert = document.querySelector('.version_alert');
+        if (!alert) return;
+
+        let rafId = null;
+        const update = () => {
+          if (rafId) cancelAnimationFrame(rafId);
+          rafId = requestAnimationFrame(() => {
+            updateVersionAlertHeight();
+            rafId = null;
+          });
+        };
+
+        requestAnimationFrame(updateVersionAlertHeight);
+        window.addEventListener('resize', update);
+        if (window.ResizeObserver) {
+          new ResizeObserver(update).observe(alert);
+        }
+      })();
+
       function iframeCustomizations(iframe) {
         let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
         {#resizeIframe(iframe);#}