mirror of
https://github.com/Wei-Shaw/sub2api.git
synced 2026-09-24 16:05:44 +08:00
fix(ops): prevent monitoring trend cards from growing unbounded
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) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
85a3b12254
commit
9707dedca2
@@ -44,7 +44,7 @@
|
||||
<div class="lg:col-span-1 min-h-[360px]">
|
||||
<OpsConcurrencyCard :platform-filter="platform" :group-id-filter="groupId" :refresh-token="dashboardRefreshToken" />
|
||||
</div>
|
||||
<div class="lg:col-span-1 min-h-[360px]">
|
||||
<div class="lg:col-span-1 h-[360px]">
|
||||
<OpsSwitchRateTrendChart
|
||||
:points="switchTrend?.points ?? []"
|
||||
:loading="loadingSwitchTrend"
|
||||
@@ -52,7 +52,7 @@
|
||||
:fullscreen="isFullscreen"
|
||||
/>
|
||||
</div>
|
||||
<div class="lg:col-span-2 min-h-[360px]">
|
||||
<div class="lg:col-span-2 h-[360px]">
|
||||
<OpsThroughputTrendChart
|
||||
:points="throughputTrend?.points ?? []"
|
||||
:by-platform="throughputTrend?.by_platform ?? []"
|
||||
|
||||
Reference in New Issue
Block a user