From d510ba30f601cc0add18d310e44aefe2ebf0ffc6 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Thu, 15 Jan 2026 09:22:35 +0000
Subject: [PATCH] Fix mobile navigation and display issues

- Add APRS to mobile navigation bar (was missing)
- Fix CSS that was forcing aircraft visuals to always display
- Only apply flex layout to visuals when they are actually visible
- Fix ADS-B dashboard mobile layout with proper flex ordering
- Reset grid properties on mobile for proper stacking
- Hide ACARS sidebar on mobile (desktop only feature)
---
 static/css/adsb_dashboard.css | 23 ++++++++++++++++++++++-
 static/css/responsive.css     | 17 ++++++++++++++---
 templates/index.html          |  1 +
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css
index 6748452..1a775c8 100644
--- a/static/css/adsb_dashboard.css
+++ b/static/css/adsb_dashboard.css
@@ -1046,27 +1046,35 @@ body {
 @media (max-width: 767px) {
     /* Dashboard should be scrollable, not fixed height */
     .dashboard {
+        display: flex;
+        flex-direction: column;
         height: auto;
         min-height: calc(100dvh - 60px);
         overflow-y: auto;
+        overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
     }
 
-    /* Main display needs explicit height on mobile */
+    /* Main display needs explicit height on mobile - reset grid properties */
     .main-display {
+        grid-column: auto;
+        grid-row: auto;
         width: 100%;
         height: 50vh;
         min-height: 300px;
         flex-shrink: 0;
+        order: 1;
     }
 
     /* Map container needs full dimensions */
     .display-container {
         height: 100%;
+        width: 100%;
     }
 
     #radarMap {
         height: 100% !important;
+        width: 100% !important;
         min-height: 300px;
     }
 
@@ -1081,8 +1089,18 @@ body {
 
     /* Sidebar should not be height restricted */
     .sidebar {
+        grid-column: auto;
+        grid-row: auto;
         max-height: none;
         flex-shrink: 0;
+        order: 2;
+        border-left: none;
+        border-top: 1px solid rgba(74, 158, 255, 0.2);
+    }
+
+    /* Hide ACARS sidebar on mobile */
+    .acars-sidebar {
+        display: none !important;
     }
 
     /* Selected aircraft panel - compact on mobile */
@@ -1103,6 +1121,9 @@ body {
 
     /* Controls bar - wrap and stack */
     .controls-bar {
+        order: 3;
+        grid-column: auto;
+        grid-row: auto;
         flex-wrap: wrap;
         gap: 8px;
         padding: 10px;
diff --git a/static/css/responsive.css b/static/css/responsive.css
index 82e64c8..82eb03f 100644
--- a/static/css/responsive.css
+++ b/static/css/responsive.css
@@ -415,15 +415,26 @@
         -webkit-overflow-scrolling: touch;
     }
 
-    /* Visual panels should stack in single column on mobile */
+    /* Visual panels should stack in single column on mobile when visible */
     .wifi-visuals,
-    .bt-visuals,
-    #aircraftVisuals {
+    .bt-visuals {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    /* Only apply flex when aircraft visuals are shown (via JS setting display: grid) */
+    #aircraftVisuals[style*="grid"] {
         display: flex !important;
         flex-direction: column !important;
         gap: 10px;
     }
 
+    /* APRS visuals - only when visible */
+    #aprsVisuals[style*="flex"] {
+        flex-direction: column !important;
+    }
+
     .wifi-visual-panel {
         grid-column: auto !important;
     }
diff --git a/templates/index.html b/templates/index.html
index 3c45ffe..9b34b33 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -431,6 +431,7 @@
         <button class="mobile-nav-btn active" data-mode="pager" onclick="switchMode('pager')">📟 Pager</button>
         <button class="mobile-nav-btn" data-mode="sensor" onclick="switchMode('sensor')">📡 433MHz</button>
         <button class="mobile-nav-btn" data-mode="aircraft" onclick="switchMode('aircraft')">✈️ Aircraft</button>
+        <button class="mobile-nav-btn" data-mode="aprs" onclick="switchMode('aprs')">📍 APRS</button>
         <button class="mobile-nav-btn" data-mode="wifi" onclick="switchMode('wifi')">📶 WiFi</button>
         <button class="mobile-nav-btn" data-mode="bluetooth" onclick="switchMode('bluetooth')">🔵 BT</button>
         <button class="mobile-nav-btn" data-mode="tscm" onclick="switchMode('tscm')">🔍 TSCM</button>