From c1dda1aec6adc3feb8c0c74c54e735b22667857b Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Mon, 16 Feb 2026 12:04:02 +0100
Subject: [PATCH] v0.5.4: monitoring page frontend fixes

- Fix tooltip "Invalid Date" by using raw.x with parsed.x fallback
- Fix chart x-axis bounds by including initial min/max in chartOpts
- Fix sysinfo alignment with fixed 2-column grid and consistent styling
- Fix chart overflow on mobile with min-width:0 and overflow:hidden
- Remove redundant <style> block from monitoring.html (moved to style.css)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../internal/web/templates/monitoring.html    | 22 ++++++++++--------
 controller/internal/web/templates/style.css   | 23 +++++++++++++++----
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/controller/internal/web/templates/monitoring.html b/controller/internal/web/templates/monitoring.html
index eb5ff8e..61e3c41 100644
--- a/controller/internal/web/templates/monitoring.html
+++ b/controller/internal/web/templates/monitoring.html
@@ -1,14 +1,6 @@
 {{define "monitoring"}}
 {{template "layout_start" .}}
 
-<style>
-/* Monitoring page specific overrides */
-.sysinfo-value {
-    text-align: right;
-    font-weight: bold;
-}
-</style>
-
 <div class="page-header">
     <h2>Rendszermonitor</h2>
 </div>
@@ -183,6 +175,8 @@
 
     // --- Chart options for line charts with LINEAR x-axis ---
     function chartOpts(yLabel, beginAtZero) {
+        var now = Date.now();
+        var defaultRangeMs = parseRangeMs('1h');
         return {
             responsive: true,
             maintainAspectRatio: false,
@@ -198,8 +192,14 @@
                     callbacks: {
                         title: function(items) {
                             if (!items.length) return '';
-                            // parsed.x is the ms timestamp on a linear axis
-                            return formatTimestamp(items[0].parsed.x);
+                            var raw = items[0].raw;
+                            if (raw && typeof raw === 'object' && raw.x) {
+                                return formatTimestamp(raw.x);
+                            }
+                            if (items[0].parsed && items[0].parsed.x) {
+                                return formatTimestamp(items[0].parsed.x);
+                            }
+                            return '';
                         }
                     }
                 }
@@ -207,6 +207,8 @@
             scales: {
                 x: {
                     type: 'linear',
+                    min: now - defaultRangeMs,
+                    max: now,
                     grid: {color: 'rgba(48,54,61,0.5)'},
                     ticks: {
                         color: '#8b949e',
diff --git a/controller/internal/web/templates/style.css b/controller/internal/web/templates/style.css
index 33c531e..8f5137f 100644
--- a/controller/internal/web/templates/style.css
+++ b/controller/internal/web/templates/style.css
@@ -1506,26 +1506,32 @@ a.stat-card:hover {
 }
 .sysinfo-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: .5rem;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
 }
 .sysinfo-row {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    padding: .35rem .5rem;
+    align-items: baseline;
+    padding: .5rem .75rem;
     border-bottom: 1px solid rgba(48, 54, 61, 0.3);
     font-size: .9rem;
+    gap: 1rem;
 }
 .sysinfo-row:last-child { border-bottom: none; }
 .sysinfo-label {
     color: var(--text-secondary);
     font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
 }
 .sysinfo-value {
     color: var(--text-primary);
     font-family: 'JetBrains Mono', monospace;
     font-size: .85rem;
+    font-weight: 600;
+    text-align: right;
+    word-break: break-word;
 }
 .charts-grid {
     display: grid;
@@ -1540,6 +1546,8 @@ a.stat-card:hover {
     border-radius: 8px;
     padding: .75rem;
     border: 1px solid rgba(48, 54, 61, 0.5);
+    min-width: 0;
+    overflow: hidden;
 }
 .chart-box-half {
     flex: 1;
@@ -1556,10 +1564,17 @@ a.stat-card:hover {
 .chart-wrap {
     position: relative;
     height: 180px;
+    overflow: hidden;
+    max-width: 100%;
+}
+.chart-wrap canvas {
+    max-width: 100%;
 }
 .chart-wrap-bar {
     position: relative;
     height: 250px;
+    overflow: hidden;
+    max-width: 100%;
 }
 .container-charts-row {
     display: flex;