21 lines
911 B
Markdown
21 lines
911 B
Markdown
# 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.
|