From 7b2aa1ac80bb712abe63fd0a60845d3e7b2a2f86 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 22 Jul 2026 20:18:24 +0000
Subject: [PATCH] Constrain usage-history charts to their card bounds

MudBlazor sets min-height/min-width fit-content on the chart element, which overrode the wrapper height in the flex layout and let the SVG grow past its card into the tile below. Override those minimums to zero, size the SVG via flex, and clip the wrapper so charts stay within their cards on phone, tablet, and desktop.
---
 src/DockerUpdateGuard/wwwroot/app.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/DockerUpdateGuard/wwwroot/app.css b/src/DockerUpdateGuard/wwwroot/app.css
index 756a170..5e099a6 100644
--- a/src/DockerUpdateGuard/wwwroot/app.css
+++ b/src/DockerUpdateGuard/wwwroot/app.css
@@ -541,13 +541,23 @@ a {
 }
 
 .dug-chart {
+    position: relative;
     min-height: 200px;
     height: 280px;
+    overflow: hidden;
 }
 
 .dug-chart .mud-chart {
     width: 100%;
     height: 100%;
+    min-width: 0;
+    min-height: 0;
+}
+
+.dug-chart .mud-chart svg {
+    flex: 1 1 auto;
+    width: 100%;
+    min-height: 0;
 }
 
 .empty-state-panel {