From e38f012b234a56fc2af762b2e5ab99e08a636602 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Mon, 2 Mar 2026 13:52:28 -0500
Subject: [PATCH] fix(dashboard): constrain chart containers to prevent
 infinite canvas growth

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.
---
 static/css/dashboard.css |  6 ++++++
 static/js/dashboard.js   | 18 +++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index cc8d211c..b82206e3 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -842,10 +842,16 @@ body {
 
 /* Charts */
 .chart-container {
+    position: relative;
     background: var(--bg1);
     border: 1px solid var(--bg2);
     border-radius: var(--border-radius);
     padding: 1.5rem;
+    height: 350px;
+}
+
+.chart-container canvas {
+    max-height: 100%;
 }
 
 /* Forms */
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index aef38875..fd88935c 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -186,11 +186,11 @@ class Dashboard {
             <div class="grid-2">
                 <div class="chart-container">
                     <h3 class="card-title">Request Volume (Last 24h)</h3>
-                    <canvas id="requests-chart" height="300"></canvas>
+                    <canvas id="requests-chart"></canvas>
                 </div>
                 <div class="chart-container">
                     <h3 class="card-title">Provider Share</h3>
-                    <canvas id="providers-chart" height="300"></canvas>
+                    <canvas id="providers-chart"></canvas>
                 </div>
             </div>
             <div class="grid-2">
@@ -241,7 +241,7 @@ class Dashboard {
             </div>
             <div class="chart-container">
                 <h3 class="card-title">Usage by Client</h3>
-                <canvas id="client-usage-chart" height="250"></canvas>
+                <canvas id="client-usage-chart"></canvas>
             </div>
         `;
     }
@@ -333,11 +333,11 @@ class Dashboard {
             <div class="grid-2">
                 <div class="chart-container">
                     <h3 class="card-title">Volume by Client</h3>
-                    <canvas id="clients-chart" height="300"></canvas>
+                    <canvas id="clients-chart"></canvas>
                 </div>
                 <div class="chart-container">
                     <h3 class="card-title">Model Distribution</h3>
-                    <canvas id="models-chart" height="300"></canvas>
+                    <canvas id="models-chart"></canvas>
                 </div>
             </div>
 
@@ -364,7 +364,7 @@ class Dashboard {
             <div class="grid-2">
                 <div class="chart-container">
                     <h3 class="card-title">Provider Spending</h3>
-                    <canvas id="costs-chart" height="300"></canvas>
+                    <canvas id="costs-chart"></canvas>
                 </div>
                 <div class="card">
                     <div class="card-header">
@@ -418,15 +418,15 @@ class Dashboard {
             <div class="grid-3 monitoring-charts">
                 <div class="chart-container">
                     <h3 class="card-title">Latency (ms)</h3>
-                    <canvas id="response-time-chart" height="200"></canvas>
+                    <canvas id="response-time-chart"></canvas>
                 </div>
                 <div class="chart-container">
                     <h3 class="card-title">Error Rate (%)</h3>
-                    <canvas id="error-rate-chart" height="200"></canvas>
+                    <canvas id="error-rate-chart"></canvas>
                 </div>
                 <div class="chart-container">
                     <h3 class="card-title">Rate Limiting</h3>
-                    <canvas id="rate-limit-chart" height="200"></canvas>
+                    <canvas id="rate-limit-chart"></canvas>
                 </div>
             </div>
         `;