edward/openstreetmap-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile panel visibility with floating button and iOS CSS fixes

Browse source 
Replace the unreliable peek-strip approach with a floating '☰ Controls'
button on the map. The button is always clearly visible, hides when the
panel is open, and reappears when the panel closes.

Also fix two iOS Safari issues that were hiding the sidebar entirely:
- overflow:hidden on body clips position:fixed elements in mobile Safari;
  reset to overflow:visible in the mobile media query
- Add viewport-fit=cover and env(safe-area-inset-bottom) padding so the
  sidebar clears the home indicator / browser toolbar
- Use 100dvh instead of 100vh to avoid iOS address-bar overflow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Edward Betts 2026-02-28 10:22:53 +00:00
parent 6927efca54
commit ceea5706b3
3 changed files with 60 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/static/style.css
View file

@ -42,6 +42,11 @@ html, body {
}
@media (max-width: 767.98px) {
/* overflow:hidden on body clips position:fixed in mobile Safari — reset it */
html, body {
overflow: visible;
}
#sidebar {
position: fixed;
bottom: 0;
@ -51,15 +56,18 @@ html, body {
max-width: 100% !important;
flex: none !important;
height: 65vh;
max-height: calc(100vh - 56px);
max-height: calc(100dvh - 56px);
min-height: unset;
transform: translateY(calc(100% - 48px));
/* fully off-screen by default; FAB opens it */
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 1000;
border-radius: 16px 16px 0 0;
border-right: none !important;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
background: #fff;
/* clear of home-indicator / browser chrome */
padding-bottom: env(safe-area-inset-bottom, 0px);
}
#sidebar.panel-open {
@ -70,6 +78,31 @@ html, body {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
position: relative;
}
/* Floating action button */
#panel-fab {
position: absolute;
bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); /* above attribution */
right: 12px;
z-index: 999;
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: none;
border-radius: 24px;
padding: 10px 16px;
font-size: 0.875rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
white-space: nowrap;
}
#panel-fab:active {
background: #f8f9fa;
}
}