fix(mobile): perfect responsive layout, zero horizontal overflow, and polished mobile nav (v23)

css/styles.css

@@ -2506,24 +2506,48 @@ body {
     width: 100%;
   }
 
+  /* Ultra-Compact Site Nav */
   /* Ultra-Compact Site Nav */
   .site-nav {
-    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));
+    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
     min-height: 48px;
+    overflow: hidden;
+    max-width: 100vw;
+  }
+  .nav-content {
+    flex-wrap: nowrap;
+    gap: 8px;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .nav-left {
+    gap: 8px;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+  .brand-wrapper {
+    gap: 0;
+    flex-shrink: 0;
+  }
+  .brand-name {
+    display: none;
+  }
+  .brand-logo-emblem {
+    width: 32px;
+    height: 32px;
   }
   .brand-text .brand-tagline,
   .badge-live-pulse {
     display: none;
   }
-  .brand-title {
-    font-size: 0.92rem;
-  }
   .nav-mode-switcher {
-    gap: 4px;
+    gap: 3px;
+    flex-shrink: 0;
   }
   .nav-mode-btn {
     padding: 5px 8px;
     font-size: 0.72rem;
+    gap: 4px;
   }
   .nav-text-desktop {
     display: none;
@@ -2531,21 +2555,38 @@ body {
   .nav-text-mobile {
     display: inline;
   }
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
   .user-profile-pill {
-    padding: 4px 8px;
+    padding: 6px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 0.72rem;
   }
+  .user-profile-pill span:last-child {
+    display: none;
+  }
 
   /* Sleek Floating Top Driving Capsule */
   .driver-hud {
     position: absolute;
     top: max(8px, env(safe-area-inset-top));
-    left: max(10px, env(safe-area-inset-left));
+    left: max(8px, env(safe-area-inset-left));
-    right: max(10px, env(safe-area-inset-right));
+    right: max(8px, env(safe-area-inset-right));
     width: auto;
-    padding: 8px 12px;
+    max-width: calc(100vw - 16px);
+    box-sizing: border-box;
+    padding: 6px 10px;
     border-radius: 16px;
-    background: rgba(10, 14, 23, 0.92);
+    background: rgba(10, 14, 23, 0.94);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.12);
@@ -2558,20 +2599,31 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .hud-state-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    flex-shrink: 1;
   }
 
   .hud-badge {
-    padding: 4px 8px;
+    padding: 3px 6px;
-    font-size: 0.68rem;
+    font-size: 0.65rem;
-    gap: 5px;
+    gap: 4px;
     flex-shrink: 0;
+    white-space: nowrap;
   }
 
   .hud-metrics-row {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 6px;
     margin: 0;
   }
 
@@ -2582,12 +2634,12 @@ body {
   }
 
   .hud-metric-number {
-    font-size: 1.15rem;
+    font-size: 1.05rem;
     font-weight: 800;
   }
 
   .hud-metric-unit {
-    font-size: 0.65rem;
+    font-size: 0.62rem;
   }
 
   .hud-metric-label {
@@ -2597,8 +2649,9 @@ body {
   .hud-capsule-actions {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 4px;
     margin-left: auto;
+    flex-shrink: 0;
   }
 
   .btn-capsule-trigger {
@@ -2606,13 +2659,13 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.15);
     color: #f8fafc;
     border-radius: 8px;
-    padding: 6px 10px;
+    padding: 5px 7px;
-    font-size: 0.76rem;
+    font-size: 0.72rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
     transition: all 0.2s ease;
   }
 
@@ -2622,7 +2675,7 @@ body {
   }
 
   .btn-expand-details {
-    padding: 6px 8px;
+    padding: 5px 6px;
   }
 
   .hud-location-bar {
@@ -3651,6 +3704,12 @@ body {
 .support-modal-header {
   padding: 16px 22px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: #0d121d;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .support-modal-header .modal-agency-meta {

index.html

@@ -54,7 +54,7 @@
   <meta name="apple-mobile-web-app-title" content="FlockRadar">
   
   <!-- Main Stylesheet -->
-  <link rel="stylesheet" href="css/styles.css?v=22">
+  <link rel="stylesheet" href="css/styles.css?v=23">
 </head>
 <body>
 
@@ -1313,11 +1313,11 @@
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
   
   <!-- Data & Application Logic with Cache Busting -->
-  <script src="data/portals.js?v=22"></script>
+  <script src="data/portals.js?v=23"></script>
-  <script src="js/icons.js?v=22"></script>
+  <script src="js/icons.js?v=23"></script>
-  <script src="js/auth.js?v=22"></script>
+  <script src="js/auth.js?v=23"></script>
-  <script src="js/radar.js?v=22"></script>
+  <script src="js/radar.js?v=23"></script>
-  <script src="js/app.js?v=22"></script>
+  <script src="js/app.js?v=23"></script>
 
   <!-- Service Worker Instant Cache Invalidation -->
   <script>

sw.js

@@ -1,20 +1,20 @@
 // Service Worker for FlockRadar Offline Driving & Live Updates
-const CACHE_NAME = 'flockradar-v22';
+const CACHE_NAME = 'flockradar-v23';
 const ASSETS_TO_CACHE = [
   './',
   './index.html',
-  './css/styles.css?v=22',
+  './css/styles.css?v=23',
-  './js/icons.js?v=22',
+  './js/icons.js?v=23',
-  './js/app.js?v=22',
+  './js/app.js?v=23',
-  './js/auth.js?v=22',
+  './js/auth.js?v=23',
-  './js/radar.js?v=22',
+  './js/radar.js?v=23',
-  './data/portals.js?v=22',
+  './data/portals.js?v=23',
-  './favicon.svg?v=22',
+  './favicon.svg?v=23',
-  './favicon.ico?v=22',
+  './favicon.ico?v=23',
-  './apple-touch-icon.png?v=22',
+  './apple-touch-icon.png?v=23',
-  './icon-192.png?v=22',
+  './icon-192.png?v=23',
-  './icon-512.png?v=22',
+  './icon-512.png?v=23',
-  './og-image.png?v=22',
+  './og-image.png?v=23',
   './assets/img/logo.svg',
   './assets/img/flock_pole_cam_palmdale.jpg',
   './manifest.json'