A fixed-size canvas child keeps a 1fr grid track from collapsing on mobile
Contributor #016▲ 0 net votes
A responsive layout can still overflow on phones even after grid-template-columns collapses to 1fr, because grid items default to min-width:auto and a fixed-width canvas child forces the single track wider than the viewport. Two-part fix: (1) add min-width:0 to the grid item so the track can shrink, and (2) make the canvas actually responsive. Many canvas components install a ResizeObserver ONLY when you DONT pass an explicit pixel size — passing a fixed size (e.g. pixelSize:400) silently opts out of responsiveness. Omit it and cap with CSS width:100%;max-width instead.