Refactor map overlays for improved layout and visibility of GPS accuracy and distance information

Author: MrAlders0n

index.html

@@ -41,7 +41,7 @@ <h1 class="flex items-center gap-2 text-lg sm:text-xl font-semibold truncate min
         </h1>
         <span id="appVersion" class="text-xs text-slate-400 flex-shrink-0 whitespace-nowrap">v1.0</span>
       </header>
-      
+
       <!-- Connection Status Bar with Settings Panel -->
       <div>
         <!-- Connection Status Bar -->
@@ -146,25 +146,37 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
           referrerpolicy="no-referrer"
           src="https://yow.meshmapper.net/embed.php?cov_grid=1&fail_grid=1&pings=0&repeaters=1&rep_coverage=0&grid_lines=0&lat=45.42150&lon=-75.69720&meters=10000">
         </iframe>
-        
-        <!-- Map Overlays - Single Row Horizontal Layout -->
-        <div class="absolute bottom-2 left-2 right-2 flex gap-2 justify-between items-center">
-          <!-- GPS Accuracy - Left -->
-          <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap flex-shrink-0">
-            <span id="gpsAcc">±-</span>
-          </div>
+
+        <!-- Map Section with Overlays -->
+        <section class="relative bg-slate-800/80 border border-slate-700 rounded-xl overflow-hidden">
+          <iframe
+            id="coverageFrame"
+            title="MeshMapper Coverage Zone"
+            style="width: 100%; height: 400px; border: 0;"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="https://yow.meshmapper.net/embed. php?cov_grid=1&fail_grid=1&pings=0&repeaters=1&rep_coverage=0&grid_lines=0&lat=45.42150&lon=-75.69720&meters=10000">
+          </iframe>
 
-          <!-- GPS Coordinates - Center (flexible but constrained) -->
-          <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center flex-1 min-w-0">
-            <div id="gpsInfo" class="truncate">-</div>
+          <!-- Top Right Overlay - GPS Accuracy & Distance Stacked -->
+          <div class="absolute top-2 right-2 flex flex-col gap-1">
+            <!-- GPS Accuracy -->
+            <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-300 whitespace-nowrap text-right">
+              <span id="gpsAcc">±-</span>
+            </div>
+            <!-- Distance from Last Ping -->
+            <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-300 whitespace-nowrap text-right">
+              <span id="distanceInfo">-</span>
+            </div>
           </div>
 
-          <!-- Distance from Last Ping - Right -->
-          <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 whitespace-nowrap flex-shrink-0">
-            <span id="distanceInfo">-</span>
+          <!-- Bottom Overlay - GPS Coordinates Full Width -->
+          <div class="absolute bottom-2 left-2 right-2">
+            <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300 text-center">
+              <span id="gpsInfo">-</span>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
       <!-- Control Buttons -->
       <section class="bg-slate-800/80 border border-slate-700 rounded-xl p-4 space-y-2">