Place mobile modal above button

This commit is contained in:
2026-03-25 17:12:50 +01:00
parent 19b66f7754
commit c60a9bd861
2 changed files with 12 additions and 12 deletions

View File

@@ -52,8 +52,13 @@ const positionPrivacyFlyover = (trigger) => {
const panelHeight = privacyFlyoverPanel.offsetHeight;
if (isMobile) {
privacyFlyover.style.removeProperty("--privacy-flyover-top");
privacyFlyover.style.removeProperty("--privacy-flyover-left");
const panelWidth = window.innerWidth - 40;
const left = 20;
const top = Math.max(gap, rect.top - panelHeight - gap);
privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
privacyFlyover.style.setProperty("--privacy-flyover-width", `${panelWidth}px`);
return;
}
@@ -66,6 +71,7 @@ const positionPrivacyFlyover = (trigger) => {
privacyFlyover.style.setProperty("--privacy-flyover-left", `${left}px`);
privacyFlyover.style.setProperty("--privacy-flyover-top", `${top}px`);
privacyFlyover.style.removeProperty("--privacy-flyover-width");
};
const closeFlyover = () => {

View File

@@ -743,7 +743,7 @@ button {
position: absolute;
top: var(--privacy-flyover-top, 2rem);
left: var(--privacy-flyover-left, auto);
width: min(680px, calc(100vw - 2rem));
width: var(--privacy-flyover-width, min(680px, calc(100vw - 2rem)));
max-height: calc(100vh - 2rem);
overflow-x: hidden;
overflow-y: auto;
@@ -1092,16 +1092,10 @@ button {
font-size: 0.95rem;
}
.privacy-flyover {
padding: 0;
}
.privacy-flyover__panel {
top: auto;
right: 1.25rem;
bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
left: 1.25rem;
width: calc(100vw - 2.5rem);
right: auto;
bottom: auto;
width: var(--privacy-flyover-width, calc(100vw - 2.5rem));
max-width: calc(100vw - 2.5rem);
max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px));
margin: 0;