From d3b53d987741a45eab10d1da9223f0d19f8d394d Mon Sep 17 00:00:00 2001
From: kisfenyo <nagyfenyvesi.viktor@gmail.com>
Date: Wed, 25 Feb 2026 16:22:29 +0100
Subject: [PATCH] monitoring: fix memory legend overflow, sort by consumption
 (v0.30.7)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                      | 8 ++++++++
 controller/internal/web/templates/monitoring.html | 3 +++
 controller/internal/web/templates/style.css       | 4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79b2db2..254c2f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 ## Changelog
 
+### v0.30.7 — Monitoring: Fix Memory Legend Overflow (2026-02-25)
+
+#### Fixed
+- **Memory legend overflow** — Legend items in the memory distribution chart now wrap properly instead of overflowing off-screen (`flex-wrap`, `white-space: nowrap`)
+
+#### Improved
+- **Sort by consumption** — Memory distribution bar and legend are now sorted by memory usage (descending), largest consumers first
+
 ### v0.30.6 — Telemetry: Better Log Deduplication (2026-02-25)
 
 #### Fixed
diff --git a/controller/internal/web/templates/monitoring.html b/controller/internal/web/templates/monitoring.html
index 6a175c0..1abb159 100644
--- a/controller/internal/web/templates/monitoring.html
+++ b/controller/internal/web/templates/monitoring.html
@@ -551,6 +551,9 @@
 
         header.textContent = 'Használt: ' + fmtMB(usedMB) + ' / ' + fmtMB(totalMB) + ' (' + Math.round(usedMB/totalMB*100) + '%)';
 
+        // Sort containers by memory usage descending
+        containers.sort(function(a, b) { return (b.mem_usage_mb || 0) - (a.mem_usage_mb || 0); });
+
         // Build bar segments
         var html = '';
         var legendHtml = '';
diff --git a/controller/internal/web/templates/style.css b/controller/internal/web/templates/style.css
index eb384a6..cfe87d5 100644
--- a/controller/internal/web/templates/style.css
+++ b/controller/internal/web/templates/style.css
@@ -816,7 +816,8 @@ select.form-control option { background: var(--bg-secondary); color: var(--text-
 }
 .memory-bar-legend {
     display: flex;
-    gap: 1.25rem;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.25rem;
     margin-top: 0.5rem;
 }
 .memory-legend-item {
@@ -825,6 +826,7 @@ select.form-control option { background: var(--bg-secondary); color: var(--text-
     gap: 0.35rem;
     font-size: .75rem;
     color: var(--text-secondary);
+    white-space: nowrap;
 }
 .memory-legend-dot {
     display: inline-block;