From 2b00ab4e12d202657a74485b8b3455339df91ea7 Mon Sep 17 00:00:00 2001 From: drjones Date: Mon, 7 Sep 2026 14:52:23 -0700 Subject: [PATCH] Make the live graph scale with the window Three things pinned it small. The container was a fixed h-64, so the graph stayed 256px tall on any display; the page was capped at max-w-7xl, so a large window only added empty margins; and the graph shared a two-column row, so it never got more than half the available width. The container is now h-[clamp(18rem,45vh,52rem)], the page cap is 2600px, and the graph panel spans its row. Measured: 525x360 to 1142x360 at 1280x800, and 988x648 to 2468x648 at 3440x1440. Chart.js needed help despite being configured responsive with maintainAspectRatio false. It had latched onto a stale size -- the canvas sat at width:0px, height:288px while its container had grown to 988x648. A ResizeObserver on the container fixed growth but not shrinking, because passing explicit dimensions to resize() left the canvas 988px wide inside a 435px container, overflowing it. Calling resize() with no arguments lets Chart.js measure the container itself, and the canvas is absolutely positioned within the relative container so it cannot force it wider. Verified from 1100x700 to 3440x1440: the canvas matches its container exactly at every size, growing and shrinking, with no horizontal page overflow. Co-Authored-By: Claude Opus 5 --- static/app.js | 34 ++++++++++++++++++++++++++++++++++ static/index.html | 17 +++++++++++------ 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/static/app.js b/static/app.js index 6b854ce..70c519f 100644 --- a/static/app.js +++ b/static/app.js @@ -1101,3 +1101,37 @@ document.addEventListener('DOMContentLoaded', () => { fetchEngineConfig(); setInterval(fetchEngineConfig, 120000); }); + + +// ---------------------------------------------------------------- chart sizing + +// Chart.js is configured responsive with maintainAspectRatio:false, so it should track +// its container on its own. In practice it latched onto a stale size -- the canvas sat +// at width:0px, height:288px (the old fixed h-64) while its container had grown to +// 988x648 on a large window. An explicit observer makes the chart follow the container +// whatever the window does. +function watchChartSize() { + const canvas = document.getElementById('oc-chart'); + if (!canvas || !canvas.parentElement) return; + const container = canvas.parentElement; + + const resize = () => { + if (typeof ocChart === 'undefined' || !ocChart) return; + // No explicit dimensions: with responsive + maintainAspectRatio:false, Chart.js + // measures the container itself. Passing width/height instead made the canvas grow + // but never shrink -- it ended up 988px wide inside a 435px container, overflowing + // it, which is also why the canvas is absolutely positioned now. + ocChart.resize(); + }; + + if (typeof ResizeObserver !== 'undefined') { + new ResizeObserver(resize).observe(container); + } + window.addEventListener('resize', resize); + // Run once after layout settles, in case the chart was built before the container had + // a width (which is how it ended up at 0 in the first place). + requestAnimationFrame(resize); + setTimeout(resize, 300); +} + +document.addEventListener('DOMContentLoaded', () => setTimeout(watchChartSize, 200)); diff --git a/static/index.html b/static/index.html index c639e56..07391c8 100644 --- a/static/index.html +++ b/static/index.html @@ -5,6 +5,11 @@ HYPERSWAP // Dual-Engine Model Orchestrator & Live Telemetry + @@ -13,7 +18,7 @@
-
+
@@ -60,7 +65,7 @@
-
+
@@ -431,7 +436,7 @@
-
+
@@ -599,8 +604,8 @@ RAM Cache GB
-
- +
+
@@ -672,7 +677,7 @@
-
+