From 7758b31d6b3621482cd73d9cd2e01890a41f50cd Mon Sep 17 00:00:00 2001
From: dnviti <dnviti@gmail.com>
Date: Wed, 17 Dec 2025 14:44:21 +0100
Subject: [PATCH] feat: Implement dynamic pack grid layout using CSS
 `repeat(auto-fill, minmax)` for responsive pack display and adjust StackView
 spacing.

---
 docs/development/CENTRAL.md                   |  1 +
 .../2025-12-17-144000_dynamic_pack_grid.md    | 19 +++++++++++++++++++
 src/client/src/components/StackView.tsx       |  2 +-
 src/client/src/modules/cube/CubeManager.tsx   | 14 ++++++++------
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 docs/development/devlog/2025-12-17-144000_dynamic_pack_grid.md

diff --git a/docs/development/CENTRAL.md b/docs/development/CENTRAL.md
index 5ace898..8d2b157 100644
--- a/docs/development/CENTRAL.md
+++ b/docs/development/CENTRAL.md
@@ -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.
diff --git a/docs/development/devlog/2025-12-17-144000_dynamic_pack_grid.md b/docs/development/devlog/2025-12-17-144000_dynamic_pack_grid.md
new file mode 100644
index 0000000..9c154ab
--- /dev/null
+++ b/docs/development/devlog/2025-12-17-144000_dynamic_pack_grid.md
@@ -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.
diff --git a/src/client/src/components/StackView.tsx b/src/client/src/components/StackView.tsx
index 993b969..988a812 100644
--- a/src/client/src/components/StackView.tsx
+++ b/src/client/src/components/StackView.tsx
@@ -54,7 +54,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards, cardWidth = 150 })
   }, [cards]);
 
   return (
-    <div className="flex flex-row gap-2 overflow-x-auto pb-8 snap-x">
+    <div className="flex flex-row gap-4 overflow-x-auto pb-8 snap-x">
       {CATEGORY_ORDER.map(category => {
         const catCards = categorizedCards[category];
         if (catCards.length === 0) return null;
diff --git a/src/client/src/modules/cube/CubeManager.tsx b/src/client/src/modules/cube/CubeManager.tsx
index 0cc0c2c..5f71227 100644
--- a/src/client/src/modules/cube/CubeManager.tsx
+++ b/src/client/src/modules/cube/CubeManager.tsx
@@ -711,12 +711,14 @@ export const CubeManager: React.FC<CubeManagerProps> = ({ packs, setPacks, onGoT
             <p>No packs generated.</p>
           </div>
         ) : (
-          <div className={`grid gap-6 pb-20 ${cardWidth <= 150
-              ? viewMode === 'list'
-                ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
-                : 'grid-cols-1 2xl:grid-cols-2'
-              : 'grid-cols-1'
-            }`}>
+          <div
+            className="grid gap-6 pb-20"
+            style={{
+              gridTemplateColumns: cardWidth <= 150
+                ? `repeat(auto-fill, minmax(${viewMode === 'list' ? '320px' : '550px'}, 1fr))`
+                : '1fr'
+            }}
+          >
             {packs.map((pack) => (
               <PackCard key={pack.id} pack={pack} viewMode={viewMode} cardWidth={cardWidth} />
             ))}