Fix flyover viewport overflow

script.js

@@ -11,9 +11,11 @@ const positionFlyover = (trigger) => {
   const isMobile = window.innerWidth <= 768;
   const rect = trigger.getBoundingClientRect();
   const gap = 16;
+  const panelHeight = flyoverPanel.offsetHeight;
 
   if (isMobile) {
-    const top = Math.min(rect.bottom + gap, window.innerHeight - 320);
+    const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
+    const top = Math.min(rect.bottom + gap, maxTop);
     flyover.style.setProperty("--flyover-top", `${Math.max(gap, top)}px`);
     flyover.style.removeProperty("--flyover-left");
     return;
@@ -23,7 +25,8 @@ const positionFlyover = (trigger) => {
   const preferredLeft = rect.right + gap;
   const maxLeft = window.innerWidth - panelWidth - gap;
   const left = Math.min(preferredLeft, maxLeft);
-  const top = Math.max(gap, rect.top - 10);
+  const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
+  const top = Math.min(Math.max(gap, rect.top - 10), maxTop);
 
   flyover.style.setProperty("--flyover-left", `${left}px`);
   flyover.style.setProperty("--flyover-top", `${top}px`);
@@ -32,8 +35,8 @@ const positionFlyover = (trigger) => {
 const openFlyover = (trigger) => {
   if (!flyover) return;
   lastTrigger = trigger ?? null;
-  positionFlyover(trigger);
   flyover.hidden = false;
+  positionFlyover(trigger);
   document.body.classList.add("is-scroll-locked");
 };
 

styles.css

@@ -584,6 +584,8 @@ button {
   position: fixed;
   inset: 0;
   z-index: 20;
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .contact-flyover__backdrop {
@@ -598,6 +600,8 @@ button {
   top: var(--flyover-top, 2rem);
   left: var(--flyover-left, auto);
   width: min(420px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
   padding: 2rem;
   border-radius: var(--radius-panel);
   background: var(--bg-light);
@@ -893,6 +897,7 @@ button {
     bottom: 1rem;
     left: 1rem;
     width: auto;
+    max-height: calc(100dvh - 2rem);
     padding: 1.5rem;
   }