fix(mobile): keep modal actions above browser chrome

css/tailwind.source.css

@@ -759,6 +759,14 @@
     @apply btn focus-ring rounded-full px-4 py-3 text-sm shadow-lg;
   }
 
+  /* Fixed mobile actions need to clear the browser home indicator as well as
+     the visual spacing requested by their component. */
+  @media (max-width: calc(theme("screens.md") - 0.02px)) {
+    .mobile-safe-bottom {
+      bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
+    }
+  }
+
   .site-update-notice__panel {
     @apply w-full rounded-2xl border border-border bg-overlay-panel-soft p-4 text-left text-text shadow-modal backdrop-blur-sm;
   }
@@ -1564,6 +1572,9 @@
     .modal-sheet {
       inline-size: 100vw;
       block-size: 100vh;
+      block-size: 100dvh;
+      min-block-size: 100vh;
+      min-block-size: 100dvh;
       max-width: none;
       max-height: none;
       margin: 0;
@@ -3858,7 +3869,11 @@
       flex: 1 1 auto;
       overflow-y: auto;
       overscroll-behavior: contain;
-      padding-block-end: var(--space-2xs);
+      padding-block-end: max(var(--space-lg), env(safe-area-inset-bottom));
+      scroll-padding-block-end: max(
+        var(--space-lg),
+        env(safe-area-inset-bottom)
+      );
       scrollbar-gutter: stable;
     }
 
@@ -3973,7 +3988,11 @@
       display: flex;
       flex: 0 0 auto;
       gap: var(--space-xs);
-      padding-block: var(--space-xs) var(--space-3xs);
+      padding-block-start: var(--space-xs);
+      padding-block-end: max(
+        var(--space-sm),
+        env(safe-area-inset-bottom)
+      );
       background: linear-gradient(
         to bottom,
         color-mix(in srgb, var(--color-page) 0%, transparent),
@@ -6900,6 +6919,18 @@
   max-height: none;
 }
 
+@media (max-width: calc(theme("screens.lg") - 0.02px)) {
+  #profileModal {
+    height: 100dvh;
+    min-height: 100dvh;
+  }
+
+  #profileModal .bv-modal__panel {
+    min-height: 0;
+    overflow: hidden;
+  }
+}
+
 #profileModal .bv-modal__panel {
   width: 100%;
   height: 100%;