services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e31323859f69fd5375e14f211d31dd158a8deae4
mtg-online-drafter/docs/development/devlog/2025-12-17-142500_responsive_pack_grid.md

911 B
Raw Blame History

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.