correct classic layout row height β HeroTile aspect-[2/1] when spanning 2 cols
- In classic mode the hero tile spans 2 columns. With aspect-square it was
- 2Γ taller than the surrounding product tiles (which are 1-col aspect-square),
- creating a large white gap in the middle row.
- Fix: HeroTile now accepts colSpan prop and applies:
- colSpan 1 β aspect-square (focused layout, unchanged)
- colSpan β₯ 2 β aspect-[2/1] (classic layout β 2 cols wide, 1 col tall)
- This makes the hero tile exactly the same height as the product tiles in
- the same row on every classic breakpoint:
- mobile 2Γ3 hero spans 2/2 cols β aspect-[2/1] = 100% wide, 50% tall β
- tablet 4Γ3 hero spans 2/4 cols β aspect-[2/1] = 50% wide, 25% tall β
- desktop 5Γ3 hero spans 2/5 cols β aspect-[2/1] = 40% wide, 20% tall β
- large 6Γ3 hero spans 2/6 cols β aspect-[2/1] = 33% wide, 16.7% tall β
- spanCols is now passed from the grid render loop down to HeroTile.
c8b9219View on GitHub β