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] 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. */} -
+