services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e13aa16766e050e036d518899122b1cbc6a895b4
mtg-online-drafter/docs/development/devlog/2025-12-17-144000_dynamic_pack_grid.md
dnviti 7758b31d6b
All checks were successful
Build and Deploy / build (push) Successful in 1m24s
Details
feat: Implement dynamic pack grid layout using CSS repeat(auto-fill, minmax) for responsive pack display and adjust StackView spacing.
2025-12-17 14:44:21 +01:00

1.3 KiB
Raw Blame History

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.