/* ============================================ SAFE AREA — TARGETED FIXES (v2) Add this after safe-area-patch.css Fixes: modals, broadcast banner, login page ============================================ */ /* ── FIX 1: MODALS — push the content box below the Dynamic Island ── The overlay fills inset:0 (fine), but the modal-content box itself needs to not start at physical top:0. We pad the overlay so the box is visually centred within the safe area, not behind the island. */ /* Class-based modals (Terms, Forgot Password, etc.) */ .modal.active { padding-top: max(env(safe-area-inset-top), var(--spacing-lg)); } /* Inline-styled fixed modals in login.html & index.html (emailVerificationModal, twoFactorModal, broadcastModal) These use display:flex + inset:0. We target their inner card via the direct-child selector. */ #emailVerificationModal > div, #twoFactorModal > div, #broadcastModal > div { margin-top: env(safe-area-inset-top); } /* broadcastModal uses padding:20px on the overlay — boost it */ #broadcastModal { padding-top: calc(env(safe-area-inset-top) + 20px) !important; } /* ── FIX 2: BROADCAST BANNER — don't slide behind the island when hidden ── The banner hides via translateY(-100%). That moves it exactly one banner-height up — but the banner's top is already AT the safe-area edge, so -100% leaves the bottom edge right at the physical top of the screen (i.e. behind or clipping the island). Solution: start the wrapper ABOVE the safe area (top: 0) and give it enough extra negative translate to clear the island completely. */ #broadcastBannerWrap { /* Override the inline top: env(safe-area-inset-top) */ top: 0 !important; /* When hidden (-100%) the banner slides above the viewport. We add an extra gap equal to the safe-area so it fully disappears behind the physical top edge rather than sitting on top of the island. */ --banner-hide-offset: calc(-100% - env(safe-area-inset-top, 0px)); } /* The inner banner needs the safe-area padding so its content clears the island when it IS visible */ #broadcastBanner { padding-top: calc(10px + env(safe-area-inset-top, 0px)); } /* Override the JS-driven transform when hidden. We can't override inline styles set by JS without !important here. Instead we use a CSS custom property trick: the JS sets transform: translateY(-100%) — we intercept with a wrapper rule that shifts it an extra env() amount when the transform is negative. Because JS sets the style directly on the element we need the rule to override it for the "hidden" state only. Cleanest approach: a CSS class added in JS (see note below). */ /* Add class="banner-hidden" when sliding out, remove when sliding in. If you can't change the JS, the !important rule below also works: */ #broadcastBannerWrap[style*="translateY(-100%)"] { transform: translateY(var(--banner-hide-offset)) !important; } /* ── FIX 3: LOGIN PAGE — fill the status-bar strip with app background ── The login page doesn't have a .top-nav, so the body background (the dark gradient) should extend all the way to the physical top. The white bar you see is the browser/system default white body background showing through before the gradient paints, OR the safe-area gap. Fix: ensure the body background covers that strip. */ /* Applies on every page, but only visibly matters on login since main app uses the top-nav to cover this area. */ html { /* Make the element itself the background so it extends under the status bar / Dynamic Island */ background: #0f1015; /* --primary-darker */ } body { /* Ensure the gradient also starts at the very top of the viewport */ background-attachment: fixed; } /* Login-specific: the .login-container sits inside the safe area. We don't want it to start behind the island. */ .login-container { padding-top: calc(var(--spacing-lg) + env(safe-area-inset-top, 0px)); /* Also handle bottom for home indicator */ padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px)); } /* If the login page also runs in standalone/TWA mode, body already gets padding from safe-area-patch.css rule. Add this to avoid double-padding on .login-container: */ body.mode-standalone .login-container, body.mode-twa .login-container { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } /* ── Plugin fullscreen — any modal created inside it ── */ #pluginFullscreenOverlay > .modal, #pluginFullscreenOverlay > [style*="position: fixed"], #pluginFullscreenOverlay > [style*="position:fixed"] { padding-top: env(safe-area-inset-top, 0px) !important; top: 0 !important; }