diff --git a/public/widget.js b/public/widget.js index f01941d..4b7c5f9 100644 --- a/public/widget.js +++ b/public/widget.js @@ -88,6 +88,7 @@ launcher.addEventListener("click", () => { panel.classList.toggle("open"); + launcher.classList.toggle("mf-panel-open", panel.classList.contains("open")); if (panel.classList.contains("open")) { launcher.classList.remove("mf-notify"); clearMessageEffects(launcher); @@ -97,7 +98,10 @@ markConversationSeen(); } }); - close.addEventListener("click", () => panel.classList.remove("open")); + close.addEventListener("click", () => { + panel.classList.remove("open"); + launcher.classList.remove("mf-panel-open"); + }); infoButton.addEventListener("click", () => { root.querySelector(".mf-gdpr").hidden = !root.querySelector(".mf-gdpr").hidden; }); @@ -662,8 +666,49 @@ 72% { transform: translateY(-1px) rotate(-2deg); } } @media (max-width: 640px) { - .mf-launcher { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx}px; } - .mf-panel { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx + 68}px; width: min(${mobile.widthPx}px, calc(100vw - 24px)); max-height: calc(100vh - 96px); } + .mf-launcher { + ${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px)); + bottom: max(${mobile.bottomPx}px, env(safe-area-inset-bottom, 0px)); + } + .mf-launcher.mf-panel-open { display: none; } + .mf-panel { + left: 0; + right: 0; + bottom: 0; + top: 0; + width: 100vw; + max-width: none; + height: 100dvh; + max-height: none; + border: 0; + border-radius: 0; + box-shadow: none; + } + .mf-panel.open { + grid-template-rows: auto minmax(0, 1fr) auto auto; + } + header { + padding-top: max(15px, env(safe-area-inset-top, 0px)); + } + .mf-messages { + min-height: 0; + padding: 14px 12px; + } + .mf-form { + padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)); + gap: 8px; + } + textarea { + min-height: 60px; + max-height: 96px; + } + .mf-send { + min-height: 60px; + } + .mf-dropzone { + min-height: 54px; + padding: 10px 12px; + } } `; }