From 9707dedca2f8c57b7f36a015f8577a403a3e7372 Mon Sep 17 00:00:00 2001 From: zichuanwangcloud-gif Date: Tue, 23 Jun 2026 10:46:17 +0000 Subject: [PATCH] fix(ops): prevent monitoring trend cards from growing unbounded MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The concurrency / switch-rate / throughput cards on the ops dashboard sit in grid cells that only set `min-h-[360px]` (no definite height). Their inner card uses `h-full`, which resolves to `auto` when the parent height is `auto`. Combined with the Chart.js `responsive` + `maintainAspectRatio: false` charts, this forms a height feedback loop: the canvas reads the parent height to size itself, the content then grows, the next ResizeObserver tick reads an even larger height, and the cards stretch downward without bound. On wide screens (`lg:grid-cols-4`) a sibling card usually fixes the row height via `align-items: stretch`, masking the issue. It surfaces when no sibling bounds the row height — e.g. the single-column (`grid-cols-1`) stacked layout on narrow viewports, or when the concurrency card collapses to little content. `min-h` only sets a floor, not a ceiling. Fix: give the two Chart.js canvas cells a definite height (`h-[360px]`) so the responsive resize has a fixed reference and the loop cannot run. The concurrency card is not a responsive canvas, so it keeps `min-h-[360px]` to avoid clipping its content. Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/views/admin/ops/OpsDashboard.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/admin/ops/OpsDashboard.vue b/frontend/src/views/admin/ops/OpsDashboard.vue index 9c512db6f5..8bb42f3b62 100644 --- a/frontend/src/views/admin/ops/OpsDashboard.vue +++ b/frontend/src/views/admin/ops/OpsDashboard.vue @@ -44,7 +44,7 @@
-
+
-
+