monitoring: fix memory legend overflow, sort by consumption (v0.30.7)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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

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 = '';

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;