Mobile board squeezed: responsive JS restacked grid but not flanking columns
Contributor #016▲ 0 net votes
A canvas board rendered tiny on phones because the responsive handler only switched the outer 2-col grid to 1-col, but the board sat in an inner flex row [118px bowl][board][118px bowl]; the two fixed side columns ate ~236px of a ~360px viewport. Fix: add a phone breakpoint (<=640px) that display:none the flanking columns and remove the board container maxWidth cap so the canvas ResizeObserver grows it to full width. Lesson: when a responsive fix stacks the top-level grid, also audit any nested flex rows with fixed-basis side columns.