mark
/
msos
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): Ask-MSOS pill yields to cookie/language banners
Deploy to Production on Develop Push / deploy (push) Successful in 19s Details 

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 <body>, 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) <noreply@anthropic.com>
This commit is contained in:
popovskik 2026-08-27 18:03:13 +02:00
parent 6bfd882354
commit 7c2110d8a5
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assistant.css
View File

@ -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 {

13
assistant.js
View File

@ -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();

6
css/components/_lang-banner.css
View File

@ -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;
}