Polish mobile modals and safe areas

src/App.vue

@@ -3488,24 +3488,10 @@ watch(mobileMenuOpen, (open) => {
                 <p class="section-kicker">Notifications</p>
                 <h3>Enable member alerts</h3>
                 <p>
-                  L484 can send updates about your membership, payment, card pickup, and private events directly to this installed app.
+                  L484 can send updates about your membership, payment, card pickup, and private events directly to this installed app. Permission {{ notificationPermission }}.
                 </p>
               </div>
             </div>
-            <div class="signin-options">
-              <div class="pwa-install-card active">
-                <strong>Recommended</strong>
-                <small>Enable notifications before creating your card so this device can receive L484 updates.</small>
-              </div>
-              <div class="pwa-install-card">
-                <strong>Status</strong>
-                <small>
-                  Permission {{ notificationPermission }} ·
-                  {{ signupNotificationSupport.supported ? 'Push supported' : 'Push unavailable' }} ·
-                  {{ signupNotificationSupport.secure ? 'Secure context' : 'HTTPS required' }}
-                </small>
-              </div>
-            </div>
             <p v-if="signupNotificationMessage" class="validation-message rounded border border-amber-400/30 bg-amber-400/10 p-3 text-sm text-amber-100">
               {{ signupNotificationMessage }}
             </p>

src/style.css

@@ -36,10 +36,24 @@
 
 html,
 body {
+  min-height: 100%;
   margin: 0;
   background: #000;
 }
 
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -3;
+  background:
+    linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.84)),
+    var(--safe-area-bg-image, #000);
+  background-position: center;
+  background-size: cover;
+  pointer-events: none;
+}
+
 body.menu-open {
   overflow: hidden;
 }
@@ -58,7 +72,7 @@ body.menu-open {
 .hero-fold::before {
   content: "";
   position: fixed;
-  inset: 0;
+  inset: calc(env(safe-area-inset-top) * -1) 0 calc(env(safe-area-inset-bottom) * -1);
   z-index: -2;
   display: none;
   background-image:
@@ -2776,7 +2790,7 @@ body.menu-open {
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 500;
+  z-index: 10000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2885,7 +2899,7 @@ body.menu-open {
   position: relative;
   z-index: 1;
   width: min(100%, 40rem);
-  max-height: calc(100svh - 3rem);
+  max-height: min(42rem, calc(100svh - 2rem));
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 8px;
@@ -2895,7 +2909,7 @@ body.menu-open {
 
 .agreement-body {
   display: grid;
-  max-height: min(30rem, calc(100svh - 15rem));
+  max-height: min(26rem, calc(100svh - 14rem));
   gap: 1rem;
   overflow-y: auto;
   padding: 1rem;