Fix flyover viewport overflow

This commit is contained in:
2026-03-22 19:44:29 +01:00
parent 8f979806d1
commit 730351c309
2 changed files with 11 additions and 3 deletions

View File

@@ -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");
};