From 9f15094fce252b9f77f090e6c2d15788c7e9d86b Mon Sep 17 00:00:00 2001
From: Lloyd <lloyd@rightup.co.uk>
Date: Mon, 27 Oct 2025 21:10:07 +0000
Subject: [PATCH] Enhance noise floor display: update sparkline dimensions,
 remove unnecessary bar styling, and adjust layout for improved visibility

---
 repeater/templates/nav.html | 58 +++++++++++++------------------------
 1 file changed, 20 insertions(+), 38 deletions(-)

diff --git a/repeater/templates/nav.html b/repeater/templates/nav.html
index 2d5368b..dc35fad 100644
--- a/repeater/templates/nav.html
+++ b/repeater/templates/nav.html
@@ -85,22 +85,18 @@
     </nav>
 
     <!-- Noise Floor Display -->
+        <div class="noise-floor-display">
+            <div class="noise-floor-label">RF Noise Floor</div>
+            <div class="noise-floor-value">
+                <span id="noise-floor-value">--</span>
+                <span class="noise-floor-unit">dBm</span>
+            </div>
+            <div class="noise-floor-sparkline-container">
+                <svg id="noise-floor-sparkline" width="220" height="48" viewBox="0 0 220 48" preserveAspectRatio="none"></svg>
+            </div>
+        </div>
 
-    <div class="noise-floor-display">
-        <div class="noise-floor-label">RF Noise Floor</div>
-        <div class="noise-floor-value">
-            <span id="noise-floor-value">--</span>
-            <span class="noise-floor-unit">dBm</span>
-        </div>
-        <div class="noise-floor-bar-container">
-            <div class="noise-floor-bar" id="noise-floor-bar"></div>
-        </div>
-        <div class="noise-floor-sparkline-container">
-            <svg id="noise-floor-sparkline" width="100" height="24" viewBox="0 0 100 24" preserveAspectRatio="none"></svg>
-        </div>
-    </div>
-
-    <div class="sidebar-footer">
+        <div class="sidebar-footer">
 
 
 
@@ -176,16 +172,16 @@
     /* Noise Floor Display Styling */
     .noise-floor-sparkline-container {
         width: 100%;
-        height: 24px;
-        margin-top: 4px;
+        height: 56px;
+        margin-top: 8px;
         background: none;
         display: flex;
         align-items: center;
-        justify-content: flex-end;
+        justify-content: center;
     }
     #noise-floor-sparkline {
-        width: 100px;
-        height: 24px;
+        width: 220px;
+        height: 48px;
         display: block;
         background: none;
     }
@@ -229,22 +225,8 @@
         margin-left: 0.125rem;
     }
 
-    .noise-floor-bar-container {
-        width: 100%;
-        height: 4px;
-        background-color: rgba(255, 255, 255, 0.1);
-        border-radius: 2px;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .noise-floor-bar {
-        height: 100%;
-        background: linear-gradient(90deg, #4ade80 0%, #4ec9b0 50%, #dcdcaa 75%, #f48771 100%);
-        border-radius: 2px;
-        transition: width 0.5s ease;
-        width: 0%;
-    }
+    /* Remove noise floor bar styling */
+    .noise-floor-bar-container, .noise-floor-bar { display: none !important; }
 
     /* Color states for noise floor value */
     #noise-floor-value.excellent {
@@ -310,7 +292,7 @@
     function renderNoiseFloorSparkline() {
         const svg = document.getElementById('noise-floor-sparkline');
         if (!svg) return;
-        const w = 100, h = 24;
+        const w = 220, h = 48;
         const minDbm = -120, maxDbm = -80;
         if (noiseFloorHistory.length < 2) {
             svg.innerHTML = '';
@@ -328,7 +310,7 @@
         for (let i = 1; i < points.length; i++) {
             path += ` L${points[i][0]},${points[i][1]}`;
         }
-        svg.innerHTML = `<path d="${path}" fill="none" stroke="#4ec9b0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />`;
+        svg.innerHTML = `<path d="${path}" fill="none" stroke="#4ec9b0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />`;
     }
 
     function updateFooterStats() {