From 7bccf716de44ae6d61a6adea4c1adb5855c5a921 Mon Sep 17 00:00:00 2001 From: popovskik Date: Thu, 27 Aug 2026 16:09:39 +0200 Subject: [PATCH] fix(mobile): language banner vs Ask-MSOS pill + guide button overflow - On phones the language-suggestion banner sat at the bottom and the floating "Ask MSOS" pill (higher z-index) overlapped its bottom-right, hiding the dismiss (x) button. Raise the banner above the pill (bottom: 84px) so they stack and the x is fully visible and tappable. - The success-screen "Read the welcome guide" button used the base .btn white-space:nowrap, so the long MK label overflowed the box on narrow screens. Allow .ms-success-links .btn to wrap (white-space: normal). Co-Authored-By: Claude Opus 4.8 (1M context) --- css/components/_lang-banner.css | 4 +++- css/pages/_member.css | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/css/components/_lang-banner.css b/css/components/_lang-banner.css index acf81162..8fb9bd6f 100644 --- a/css/components/_lang-banner.css +++ b/css/components/_lang-banner.css @@ -56,7 +56,9 @@ .lang-suggest { left: 16px; right: 16px; - bottom: 16px; + /* sit above the floating "Ask MSOS" pill (bottom-right, z-index above + this banner) so it never covers the dismiss (×) button */ + bottom: 84px; transform: translateY(24px); flex-wrap: wrap; } diff --git a/css/pages/_member.css b/css/pages/_member.css index 9fada1c7..ce92075f 100644 --- a/css/pages/_member.css +++ b/css/pages/_member.css @@ -225,6 +225,9 @@ .ms-success-text { color: #667085; font-size: 16px; line-height: 25px; max-width: 520px; margin: 0 auto 24px; } .ms-success-next { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #98A2B3; margin: 0 0 14px; } .ms-success-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } +/* allow long labels (e.g. MK "Прочитајте го Водичот за добредојде") to wrap + inside the button instead of overflowing the box (base .btn is nowrap) */ +.ms-success-links .btn { white-space: normal; } /* ---- faq ---- */ .mm-faqs { max-width: 780px; margin: 32px auto 0; }