From 3735d57410ac9359ca357d623074c4fe64246f72 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 26 Jul 2026 14:58:09 -0400
Subject: [PATCH] fix(mobile): keep modal actions above browser chrome

---
 css/tailwind.source.css                    | 35 ++++++++++++++++++++--
 index.html                                 |  2 +-
 tests/profile-modal-mobile-layout.test.mjs | 34 +++++++++++++++++++++
 3 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 tests/profile-modal-mobile-layout.test.mjs

diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 0b3e12eb..c07553f2 100644
--- a/css/tailwind.source.css
+++ b/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%;
diff --git a/index.html b/index.html
index a3b4304c..a7acd634 100644
--- a/index.html
+++ b/index.html
@@ -386,7 +386,7 @@
       <!-- Mobile Search FAB -->
       <button
         id="mobileSearchFab"
-        class="focus-ring fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-accent-strong shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95 md:hidden"
+        class="mobile-safe-bottom focus-ring fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-accent-strong shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95 md:hidden"
         aria-label="Open search"
       >
         <svg
diff --git a/tests/profile-modal-mobile-layout.test.mjs b/tests/profile-modal-mobile-layout.test.mjs
new file mode 100644
index 00000000..3c1425cc
--- /dev/null
+++ b/tests/profile-modal-mobile-layout.test.mjs
@@ -0,0 +1,34 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { readFile } from "node:fs/promises";
+
+const styles = await readFile(
+  new URL("../css/tailwind.source.css", import.meta.url),
+  "utf8",
+);
+
+test("mobile modal sheets use the dynamic viewport instead of extending behind browser chrome", () => {
+  assert.match(
+    styles,
+    /\.bv-modal__panel,\s*\.modal-sheet\s*\{[^}]*block-size:\s*100dvh;[^}]*min-block-size:\s*100dvh;/s,
+  );
+  assert.match(
+    styles,
+    /#profileModal\s*\{[^}]*height:\s*100dvh;[^}]*min-height:\s*100dvh;/s,
+  );
+});
+
+test("mobile profile session actions and menu scrolling clear the bottom safe area", () => {
+  assert.match(
+    styles,
+    /\.profile-modal__menu\s*\{[^}]*padding-block-end:\s*max\(var\(--space-lg\),\s*env\(safe-area-inset-bottom\)\);[^}]*scroll-padding-block-end:/s,
+  );
+  assert.match(
+    styles,
+    /\.profile-modal__mobile-actions\s*\{[^}]*padding-block-end:\s*max\(\s*var\(--space-sm\),\s*env\(safe-area-inset-bottom\)\s*\);/s,
+  );
+  assert.match(
+    styles,
+    /\.mobile-safe-bottom\s*\{[^}]*bottom:\s*calc\(var\(--space-lg\)\s*\+\s*env\(safe-area-inset-bottom\)\);/s,
+  );
+});