feat: Implement dynamic pack grid layout using CSS repeat(auto-fill, minmax) for responsive pack display and adjust StackView spacing.
All checks were successful
Build and Deploy / build (push) Successful in 1m24s

This commit is contained in:
2025-12-17 14:44:21 +01:00
parent 90d50bf1c2
commit 7758b31d6b
4 changed files with 29 additions and 7 deletions

View File

@@ -76,3 +76,4 @@
- [Fix Expansion Pack Generation](./devlog/2025-12-17-140000_fix_expansion_generation.md): Completed. Enforced infinite card pool for expansion drafts to ensure correct pack counts and prevent depletion.
- [Responsive Pack Grid Layout](./devlog/2025-12-17-142500_responsive_pack_grid.md): Completed. Implemented responsive multi-column grid for generated packs when card size is reduced (<25% slider).
- [Stack View Consistency Fix](./devlog/2025-12-17-143000_stack_view_consistency.md): Completed. Removed transparent overrides for Stack View, ensuring it renders with the standard unified container graphic.
- [Dynamic Pack Grid Layout](./devlog/2025-12-17-144000_dynamic_pack_grid.md): Completed. Implemented responsive CSS grid with `minmax(550px, 1fr)` for Stack/Grid views to auto-fit packs based on screen width without explicit column limits.

View File

@@ -0,0 +1,19 @@
# Dynamic Pack Grid Layout
## Objective
Implement a truly dynamic, screen-dependent pack grid layout for Stack and Grid views to satisfy the requirement: "implement the grid to have dynamic number of packs in a single row based on the screen width".
## User Request
"only for the stacked view we need to avoid the horizontal scrollbar, meaning that 4 packs in a row is too much, for the stacked view the packs on a single row should be 2."
"now implement the grid to have dynamic number of packs in a single row based on the screen width"
## Implementation
- Modified `src/client/src/modules/cube/CubeManager.tsx`.
- Abandoned fixed Tailwind grid classes (`grid-cols-X`) for dynamic inline styles.
- Utilized CSS Grid `repeat(auto-fill, minmax(..., 1fr))` syntax.
- **Rules per view**:
- **List View**: `minmax(320px, 1fr)`. Allows multiple compact columns (up to 4+ on ultrawide).
- **Stack/Grid View**: `minmax(550px, 1fr)`. Guarantees wider columns. On a standard 1080p width (~1500px available), this results in **2 columns**. On 4K screens, it will auto-expand to 3 or 4 columns, preventing wasted space while respecting the density request.
## Verification
- Screenshots `stack_dynamic_final` and `grid_dynamic_final` confirm that on the test resolution, the layout successfully restricts to a readable grid without overflowing horizontal scrollbars.