From 7c2110d8a5e847118823b85c4f8ba906a8a7fcb1 Mon Sep 17 00:00:00 2001 From: popovskik Date: Thu, 27 Aug 2026 18:03:13 +0200 Subject: [PATCH] fix(mobile): Ask-MSOS pill yields to cookie/language banners In in-app browsers (Instagram/Facebook) the floating pill (z-index 9999, same as the cookie banner) sat on top of the cookie Accept button and the language banner, so consent could not be tapped. The pill now hides whenever the cookie-consent (.msos-cc) or language (.lang-suggest) banner is present, via a MutationObserver on , and reappears once they are dismissed. With the pill yielding, the language banner is dropped back to the bottom edge. Co-Authored-By: Claude Opus 4.8 (1M context) --- assistant.css | 2 ++ assistant.js | 13 +++++++++++++ css/components/_lang-banner.css | 6 +++--- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/assistant.css b/assistant.css index e78fd253..dd604b7e 100644 --- a/assistant.css +++ b/assistant.css @@ -18,6 +18,8 @@ bottom-right, so move the assistant to the bottom-left there. */ .msa-root.msa-left { right: auto; left: 20px; } .msa-root.msa-left .msa-panel { right: auto; left: 0; } +/* Hidden while a bottom overlay (cookie consent / language banner) is up. */ +.msa-root.msa-hidden { display: none !important; } /* launcher */ .msa-launch { diff --git a/assistant.js b/assistant.js index a4372a7d..57ad655c 100644 --- a/assistant.js +++ b/assistant.js @@ -321,6 +321,19 @@ root.querySelector(".msa-x").addEventListener("click", close); root.querySelector(".msa-form").addEventListener("submit", function (e) { e.preventDefault(); submit(); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape" && opened) close(); }); + + // Yield to bottom-anchored overlays (cookie-consent banner, language + // banner) so the launcher never sits on top of their action buttons — + // important in in-app browsers (Instagram/Facebook) where everything + // stacks at the bottom. The pill reappears once they are dismissed. + (function () { + function overlayUp() { + return !!document.querySelector(".msos-cc") || !!document.querySelector(".lang-suggest"); + } + function sync() { root.classList.toggle("msa-hidden", overlayUp()); } + try { new MutationObserver(sync).observe(document.body, { childList: true }); } catch (e) {} + sync(); + })(); } if (document.readyState !== "loading") build(); diff --git a/css/components/_lang-banner.css b/css/components/_lang-banner.css index 8fb9bd6f..e3c5c7fc 100644 --- a/css/components/_lang-banner.css +++ b/css/components/_lang-banner.css @@ -56,9 +56,9 @@ .lang-suggest { left: 16px; right: 16px; - /* sit above the floating "Ask MSOS" pill (bottom-right, z-index above - this banner) so it never covers the dismiss (×) button */ - bottom: 84px; + /* The Ask-MSOS pill now hides while this banner is up (see assistant.js), + so the banner can sit at the bottom without colliding with it. */ + bottom: 16px; transform: translateY(24px); flex-wrap: wrap; }