fix(dashboard): constrain chart containers to prevent infinite canvas growth
Some checks failed
CI / Check (push) Has been cancelled
CI / Clippy (push) Has been cancelled
CI / Formatting (push) Has been cancelled
CI / Test (push) Has been cancelled
CI / Release Build (push) Has been cancelled

Added fixed height and position:relative to .chart-container so Chart.js
responsive mode has a bounded parent. Removed height attributes from all
canvas elements that conflict with Chart.js responsive sizing.
This commit is contained in:
2026-03-02 13:52:28 -05:00
parent fbd3751102
commit e38f012b23
2 changed files with 15 additions and 9 deletions

View File

@@ -842,10 +842,16 @@ body {
/* Charts */ /* Charts */
.chart-container { .chart-container {
position: relative;
background: var(--bg1); background: var(--bg1);
border: 1px solid var(--bg2); border: 1px solid var(--bg2);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 1.5rem; padding: 1.5rem;
height: 350px;
}
.chart-container canvas {
max-height: 100%;
} }
/* Forms */ /* Forms */

View File

@@ -186,11 +186,11 @@ class Dashboard {
<div class="grid-2"> <div class="grid-2">
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Request Volume (Last 24h)</h3> <h3 class="card-title">Request Volume (Last 24h)</h3>
<canvas id="requests-chart" height="300"></canvas> <canvas id="requests-chart"></canvas>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Provider Share</h3> <h3 class="card-title">Provider Share</h3>
<canvas id="providers-chart" height="300"></canvas> <canvas id="providers-chart"></canvas>
</div> </div>
</div> </div>
<div class="grid-2"> <div class="grid-2">
@@ -241,7 +241,7 @@ class Dashboard {
</div> </div>
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Usage by Client</h3> <h3 class="card-title">Usage by Client</h3>
<canvas id="client-usage-chart" height="250"></canvas> <canvas id="client-usage-chart"></canvas>
</div> </div>
`; `;
} }
@@ -333,11 +333,11 @@ class Dashboard {
<div class="grid-2"> <div class="grid-2">
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Volume by Client</h3> <h3 class="card-title">Volume by Client</h3>
<canvas id="clients-chart" height="300"></canvas> <canvas id="clients-chart"></canvas>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Model Distribution</h3> <h3 class="card-title">Model Distribution</h3>
<canvas id="models-chart" height="300"></canvas> <canvas id="models-chart"></canvas>
</div> </div>
</div> </div>
@@ -364,7 +364,7 @@ class Dashboard {
<div class="grid-2"> <div class="grid-2">
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Provider Spending</h3> <h3 class="card-title">Provider Spending</h3>
<canvas id="costs-chart" height="300"></canvas> <canvas id="costs-chart"></canvas>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
@@ -418,15 +418,15 @@ class Dashboard {
<div class="grid-3 monitoring-charts"> <div class="grid-3 monitoring-charts">
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Latency (ms)</h3> <h3 class="card-title">Latency (ms)</h3>
<canvas id="response-time-chart" height="200"></canvas> <canvas id="response-time-chart"></canvas>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Error Rate (%)</h3> <h3 class="card-title">Error Rate (%)</h3>
<canvas id="error-rate-chart" height="200"></canvas> <canvas id="error-rate-chart"></canvas>
</div> </div>
<div class="chart-container"> <div class="chart-container">
<h3 class="card-title">Rate Limiting</h3> <h3 class="card-title">Rate Limiting</h3>
<canvas id="rate-limit-chart" height="200"></canvas> <canvas id="rate-limit-chart"></canvas>
</div> </div>
</div> </div>
`; `;