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

10
web/templates/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>{% if route_name %}{{ route_name }} – {% endif %}OSM Public Transport → GeoJSON</title>
{% if route_name %}<meta property="og:title" content="{{ route_name }} – OSM Public Transport → GeoJSON">{% endif %}
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
@ -124,7 +124,13 @@
</div><!-- /sidebar -->
<!-- Map -->
<div class="col-9" id="map"></div>
<div class="col-9" id="map">
<!-- Mobile floating button to open the panel (hidden on desktop) -->
<button id="panel-fab" class="d-md-none" type="button" aria-label="Open controls">
<span id="panel-fab-icon">☰</span>
<span id="panel-fab-label">Controls</span>
</button>
</div>
</div>
</div>