Fix mobile flyout
This commit is contained in:
@@ -14,9 +14,7 @@ const positionFlyover = (trigger) => {
|
|||||||
const panelHeight = flyoverPanel.offsetHeight;
|
const panelHeight = flyoverPanel.offsetHeight;
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
const maxTop = Math.max(gap, window.innerHeight - panelHeight - gap);
|
flyover.style.removeProperty("--flyover-top");
|
||||||
const top = Math.min(rect.bottom + gap, maxTop);
|
|
||||||
flyover.style.setProperty("--flyover-top", `${Math.max(gap, top)}px`);
|
|
||||||
flyover.style.removeProperty("--flyover-left");
|
flyover.style.removeProperty("--flyover-left");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
13
styles.css
13
styles.css
@@ -889,13 +889,16 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.contact-flyover__panel {
|
.contact-flyover__panel {
|
||||||
top: var(--flyover-top, auto);
|
top: auto;
|
||||||
right: auto;
|
right: 1rem;
|
||||||
bottom: 1rem;
|
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
||||||
left: 1rem;
|
left: 1rem;
|
||||||
width: auto;
|
width: calc(100vw - 2rem);
|
||||||
max-height: calc(100dvh - 2rem);
|
max-width: calc(100vw - 2rem);
|
||||||
|
max-height: calc(100dvh - 7rem - env(safe-area-inset-bottom, 0px));
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-item {
|
.contact-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user