Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Fix mobile map picker footer cut off by iOS Safari chrome (#53)

Browse source 
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.
This commit is contained in:
Emi Griffith 2026-07-11 14:17:04 -07:00 committed by GitHub
parent 431457132a
commit a05809f39d
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
static/style.css
View file

@ -908,7 +908,18 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
.rd-colh b { font-size: 10.5px; } .rd-colh b { font-size: 10.5px; }
.mp-overlay { padding: 0; } .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%; } .find-bar { width: 100%; }
.guide-metrics { grid-template-columns: 1fr; gap: 2px 0; } .guide-metrics { grid-template-columns: 1fr; gap: 2px 0; }
.guide-metrics dt { margin-top: 10px; } .guide-metrics dt { margin-top: 10px; }