mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 12:32:43 +00:00
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:
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}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user