From a05809f39de9e5f67880ce1896f10487c88f6352 Mon Sep 17 00:00:00 2001
From: Emi Griffith <emerytgriffith@gmail.com>
Date: Sat, 11 Jul 2026 14:17:04 -0700
Subject: [PATCH] Fix mobile map picker footer cut off by iOS Safari chrome
 (#53)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On phones the location-picker modal is a full-screen sheet sized with
height: 100vh. On iOS Safari 100vh is the large-viewport height (measured
as if the browser toolbars were retracted), so while the toolbars are
showing the bottom of the sheet — the footer with the 'Use this location'
button — falls behind Safari's chrome and is cut off.

Size the sheet with 100dvh (dynamic viewport height), which tracks the
currently-visible height. The flex map yields the space so the footer
stays on screen. 100vh is kept as a fallback for older engines, and the
footer gains safe-area-inset-bottom padding to clear the home indicator
once the bottom toolbar retracts.
---
 static/style.css | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index a86365c..b556684 100644
--- a/static/style.css
+++ b/static/style.css
@@ -908,7 +908,18 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   .rd-colh b { font-size: 10.5px; }
 
   .mp-overlay { padding: 0; }
-  .mp-modal { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
+  /* Full-screen sheet. Size to the *dynamic* viewport (dvh) — plain 100vh on
+     iOS Safari is the large-viewport height (toolbars retracted), so with the
+     chrome showing the footer's "Use this location" button falls behind it and
+     gets cut off. dvh tracks the currently-visible height, and the flex map
+     gives up the space so the footer stays on-screen. vh kept as a fallback. */
+  .mp-modal {
+    max-width: none; border-radius: 0; border: none;
+    max-height: 100vh; height: 100vh;
+    max-height: 100dvh; height: 100dvh;
+  }
+  /* Clear the home-indicator inset once the bottom toolbar retracts. */
+  .mp-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
   .find-bar { width: 100%; }
   .guide-metrics { grid-template-columns: 1fr; gap: 2px 0; }
   .guide-metrics dt { margin-top: 10px; }