fix(charts): reserve chart-card dimensions to avoid Recharts -1 size warning

The scatter-correlation card wrapper relied solely on Tailwind's
aspect-ratio utilities to derive its height from width, and explicitly
unset any inline height. When the dynamic-loaded chart mounted in
place of the h-[180px] skeleton, ResponsiveContainer briefly measured
a zero-sized parent before the browser resolved aspect-ratio against
the parent's width, emitting a width(-1)/height(-1) console warning.

Add a min-h-[180px] floor (matching the loading skeleton) so the
wrapper always has a non-zero height at first paint. The aspect-ratio
rules continue to drive the final card shape once layout settles.
This commit is contained in:
Marc-André Bombeck committed 2026-05-16 21:53:07 +02:00
1 parent 95957db1e2
commit 322d0844ee
1 file changed
+7 -1
@@ -91,7 +91,13 @@ export function ScatterCorrelationChart<T extends Record<string, number>>({
// approximates the previous 250 px shape.
return (
<div
className="touch-pan-y aspect-square sm:aspect-[3/2] sm:h-auto"
// v1.4.34.1 — reserve a minimum height matching the dynamic-import
// skeleton so ResponsiveContainer always measures a non-zero parent
// at first paint. The `aspect-ratio` rules still drive the final
// shape once layout settles; this floor only prevents the brief
// zero-height window that fires Recharts' width(-1)/height(-1)
// console warning when the chart swaps in after the skeleton.
className="touch-pan-y aspect-square min-h-[180px] sm:aspect-[3/2] sm:h-auto"
style={{ height: undefined }}
data-explicit-height={height}
>