gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix flyover viewport overflow

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 19:44:29 +01:00
parent 8f979806d1
commit 730351c309
2 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
script.js
View File

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

5
styles.css
View File

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