From cdc29a812faa1c1328404753901f444259bc52e5 Mon Sep 17 00:00:00 2001
From: Yan <75355375+yancat160@users.noreply.github.com>
Date: Fri, 8 May 2026 10:16:58 -0400
Subject: [PATCH 1/2] keep charts responsive when the viewport resizes

The chart canvas in src/components/charts/Chart.tsx was rendered
directly inside the Box wrapper. Chart.js writes inline pixel sizes
onto the canvas, and while the canvas lives in the normal flow that
pixel width propagates up as min and max content through every flex
parent and into the surrounding CSS Grid track on the Tabs panel.
The track therefore stayed at whatever width the canvas had when the
page first loaded, and the chart could only grow on resize, never
shrink, until the user reloaded.

Wrap the canvas in a position-relative div and position the canvas
absolutely. Out-of-flow elements do not contribute to ancestor
intrinsic sizing, so the wrapper now takes its size purely from the
parent layout. Chart.js' ResizeObserver picks up the wrapper size and
resizes the canvas to fit, in both directions, without a reload.

Verified in playwright with resize 1280 to 800 (canvas 925 to 699)
and 800 to 1400 (canvas 699 to 1117), both without reload, and that
the click-to-toggle legend, the focusLabel hover behaviour, and the
website overview / revenue charts that share this component all
still render and update normally.
---
 src/components/charts/Chart.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/charts/Chart.tsx b/src/components/charts/Chart.tsx
index b6ae9d794..ec8392509 100644
--- a/src/components/charts/Chart.tsx
+++ b/src/components/charts/Chart.tsx
@@ -122,7 +122,20 @@ export function Chart({
   return (
     <Column gap="6">
       <Box {...props}>
-        <canvas ref={canvas} />
+        {/*
+          Position the canvas absolutely inside a relative-positioned
+          wrapper. Chart.js writes inline pixel sizes onto the canvas, and
+          while it lives in the normal flow that pixel width propagates up
+          as min/max-content through every flex parent into the surrounding
+          CSS Grid track, pinning the chart's column at its widest measured
+          size and only resetting on a full page reload. Taking the canvas
+          out of flow with position: absolute breaks that propagation; the
+          wrapper sizes purely from its parent (width: 100%, height: 100%)
+          and Chart.js' ResizeObserver picks up viewport changes.
+        */}
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <canvas ref={canvas} style={{ position: 'absolute', top: 0, left: 0 }} />
+        </div>
       </Box>
       <Legend items={legendItems} onClick={handleLegendClick} />
     </Column>

From 54e038f42323a7bc599eb70bf20b42f6bb0eb1a5 Mon Sep 17 00:00:00 2001
From: Yan <75355375+yancat160@users.noreply.github.com>
Date: Fri, 8 May 2026 15:25:14 -0400
Subject: [PATCH 2/2] clip the canvas wrapper to suppress first-paint overflow

Address Greptile P2 review on PR #4260. Before Chart.js' first
ResizeObserver callback fires the canvas keeps its HTML5 default
size of 300x150. With position: absolute that no longer pushes any
ancestor's intrinsic size, but on a wrapper narrower than 300px the
canvas can still poke past the wrapper for one frame before Chart.js
catches up. Adding overflow: hidden to the relative wrapper clips
that transient overflow and is the pattern Chart.js' own docs
recommend for responsive charts inside flex / grid layouts. No
steady-state behaviour change because the canvas is already sized to
the wrapper once Chart.js takes over; the React tooltip lives
outside this wrapper so it remains visible.
---
 src/components/charts/Chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/charts/Chart.tsx b/src/components/charts/Chart.tsx
index ec8392509..770792d24 100644
--- a/src/components/charts/Chart.tsx
+++ b/src/components/charts/Chart.tsx
@@ -133,7 +133,7 @@ export function Chart({
           wrapper sizes purely from its parent (width: 100%, height: 100%)
           and Chart.js' ResizeObserver picks up viewport changes.
         */}
-        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden' }}>
           <canvas ref={canvas} style={{ position: 'absolute', top: 0, left: 0 }} />
         </div>
       </Box>