Merge pull request #108 from MrAlders0n/copilot/reposition-gps-overlay-elements

Reposition GPS overlay elements on coverage map

Author: MrAlders0n

content/tailwind.css

@@ -37,6 +37,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -228,6 +230,9 @@
   .static {
     position: static;
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -237,6 +242,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .z-10 {
+    z-index: 10;
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -264,6 +272,9 @@
   .inline {
     display: inline;
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -273,6 +284,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -306,6 +320,9 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .flex-col {
+    flex-direction: column;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -371,14 +388,34 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
+  .rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rounded-b-xl {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
   .border-slate-700 {
     border-color: var(--color-slate-700);
   }
@@ -448,6 +485,9 @@
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -457,13 +497,20 @@
   .text-center {
     text-align: center;
   }
+  .text-right {
+    text-align: right;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -622,6 +669,17 @@
       background-color: var(--color-emerald-600);
     }
   }
+  .sm\:h-8 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:text-xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
 }
 @property --tw-space-y-reverse {
   syntax: "*";

index.html

@@ -147,23 +147,26 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
           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">
+        <!-- Map Overlays -->
+        <!-- Top-right corner: GPS Accuracy and Distance stacked vertically -->
+        <div class="absolute top-2 right-2 z-10 flex flex-col gap-2 text-right">
+          <!-- GPS Accuracy -->
+          <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
             <span id="gpsAcc">±-</span>
           </div>
 
-          <!-- 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>
-          </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">
+          <!-- Distance from Last Ping -->
+          <div class="bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg px-3 py-2 text-xs text-slate-300">
             <span id="distanceInfo">-</span>
           </div>
         </div>
+        
+        <!-- Bottom: GPS Coordinates spanning full width -->
+        <div class="absolute bottom-2 left-2 right-2 z-10">
+          <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">
+            <div id="gpsInfo">-</div>
+          </div>
+        </div>
       </section>
 
       <!-- Control Buttons -->