diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css index f66f8ec..6748452 100644 --- a/static/css/adsb_dashboard.css +++ b/static/css/adsb_dashboard.css @@ -1041,3 +1041,161 @@ body { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } + +/* ============== MOBILE FIXES ============== */ +@media (max-width: 767px) { + /* Dashboard should be scrollable, not fixed height */ + .dashboard { + height: auto; + min-height: calc(100dvh - 60px); + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + /* Main display needs explicit height on mobile */ + .main-display { + width: 100%; + height: 50vh; + min-height: 300px; + flex-shrink: 0; + } + + /* Map container needs full dimensions */ + .display-container { + height: 100%; + } + + #radarMap { + height: 100% !important; + min-height: 300px; + } + + #radarScope { + height: 100%; + } + + #radarCanvas { + max-width: 100%; + max-height: 100%; + } + + /* Sidebar should not be height restricted */ + .sidebar { + max-height: none; + flex-shrink: 0; + } + + /* Selected aircraft panel - compact on mobile */ + .selected-aircraft { + max-height: 200px; + } + + /* Aircraft list - scrollable with reasonable height */ + .aircraft-list { + max-height: 300px; + } + + .aircraft-list-content { + max-height: 250px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + } + + /* Controls bar - wrap and stack */ + .controls-bar { + flex-wrap: wrap; + gap: 8px; + padding: 10px; + } + + .control-group { + flex-wrap: wrap; + } + + /* Airband controls - stack on mobile */ + .airband-controls { + width: 100%; + justify-content: center; + flex-wrap: wrap; + } + + .airband-divider { + display: none; + } + + .airband-visualizer { + width: 100%; + justify-content: center; + border-left: none; + border-top: 1px solid var(--border-color); + margin-left: 0; + margin-top: 8px; + padding-top: 8px; + } + + /* Start button full width on mobile */ + .start-btn { + width: 100%; + margin-left: 0; + margin-top: 8px; + } + + /* Header simplification */ + .header { + flex-wrap: wrap; + gap: 8px; + } + + .stats-badges { + order: 3; + width: 100%; + justify-content: center; + } + + .status-bar { + gap: 10px; + } + + .logo span { + display: none !important; + } + + /* Telemetry grid - single column */ + .telemetry-grid { + grid-template-columns: 1fr; + } + + /* Aircraft details - 2 columns instead of 3 */ + .aircraft-details { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Tablet specific adjustments */ +@media (min-width: 768px) and (max-width: 1023px) { + .main-display { + min-height: 400px; + } + + .sidebar { + max-height: 50vh; + } +} + +/* Leaflet touch fixes for mobile */ +.leaflet-container { + touch-action: pan-x pan-y; + -webkit-tap-highlight-color: transparent; +} + +.leaflet-control-zoom a { + min-width: 44px !important; + min-height: 44px !important; + line-height: 44px !important; + font-size: 18px !important; +} + +/* Ensure panels don't overflow */ +.panel { + overflow: hidden; +} diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html index 462e137..b614751 100644 --- a/templates/adsb_dashboard.html +++ b/templates/adsb_dashboard.html @@ -1392,8 +1392,25 @@ sudo make install // Draw range rings after map is ready setTimeout(() => drawRangeRings(), 100); + + // Fix map size on mobile after initialization + setTimeout(() => { + if (radarMap) radarMap.invalidateSize(); + }, 200); } + // Handle window resize for map (especially important on mobile) + window.addEventListener('resize', function() { + if (radarMap) radarMap.invalidateSize(); + }); + + // Handle orientation changes for mobile devices + window.addEventListener('orientationchange', function() { + setTimeout(() => { + if (radarMap) radarMap.invalidateSize(); + }, 200); + }); + // ============================================ // TRACKING CONTROL // ============================================