mtg-online-drafter/docs/development/devlog/2025-12-17-142500_responsive_pack_grid.md

Responsive Pack Grid Layout

Objective

Update the generated packs UI to maximize pack density on screen when the user reduces the card size.

Requirements

• When the card size slider is under 25% (value <= 150), switch the pack container layout from a vertical stack (grid-cols-1) to a responsive multi-column grid (grid-cols-1 md:grid-cols-2 xl:grid-cols-3 etc.).
• Ensure this applies to all view modes (List, Grid, Stack).
• Maintain consistency in UI.

Implementation

• Modified src/client/src/modules/cube/CubeManager.tsx.
• Added conditional logic to the main packs container div.
• Condition: cardWidth <= 150.
• Classes: grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 for compact mode.

Verification

• Verified using browser simulation.
• Verified that setting slider to 100 triggers the grid layout.
• Verified that setting slider to 300 reverts to vertical stack.