From a05e225420acfff277f69f92c593fa3e0315e6c9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 16:14:13 +0000
Subject: [PATCH 1/6] Improve MTG deck visual layout with responsive CSS Grid

Replaced float-based layout with CSS Grid for better responsive behavior:
- Cards now auto-fit into available screen width
- Responsive card sizing using clamp() for different viewports
- Mobile optimization: stacks overlap on narrow screens with hover to bring forward
- Eliminated excessive margins when stacks have fewer than 4 cards
- Maintains card stacking visualization with offset positioning

This provides better scaling from mobile to desktop while preserving the
visual representation of card quantities through stacked cards.
---
 theme/static/css/main.css     | 46 ++++++++++++++++++++++++++++++-----
 theme/templates/mtg_deck.html | 35 ++++++++++++--------------
 2 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 1d6f2ff..940864e 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -89,17 +89,51 @@
     padding: 15px;
 }
 
+/* Grid container for card stacks - responsive layout */
+.mtg-visual-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
 .card-stack {
-    float:left;
-    padding: 10px;
     position: relative;
-    width:262px;
+    height: clamp(300px, 40vw, 490px);
+    width: 100%;
+    max-width: 280px;
+    margin: 0 auto;
+    transition: z-index 0.2s ease;
 }
 
 .overview-card-image {
-    height: 350px;
-    position:absolute;
-    top:0px;
+    height: clamp(200px, 30vw, 350px);
+    width: auto;
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Mobile: overlap stacks for compact view */
+@media (max-width: 768px) {
+    .mtg-visual-grid {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .card-stack {
+        height: clamp(120px, 25vw, 180px);
+        max-width: 100%;
+    }
+
+    .card-stack:hover {
+        z-index: 100;
+    }
+
+    .overview-card-image {
+        height: clamp(150px, 35vw, 250px);
+    }
 }
 
 .overview-card-image:hover {
diff --git a/theme/templates/mtg_deck.html b/theme/templates/mtg_deck.html
index e28d33f..c55ae63 100644
--- a/theme/templates/mtg_deck.html
+++ b/theme/templates/mtg_deck.html
@@ -151,19 +151,19 @@ <h5 class="mb-0">Mana Curve</h5>
             <div class="card-body">
                 {% if ns.landcount > 0 %}
                 <h4>Lands <small class="text-muted">({{ ns.landcount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.lands %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -171,24 +171,23 @@ <h4>Lands <small class="text-muted">({{ ns.landcount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.creaturecount > 0 %}
                 <h4>Creatures <small class="text-muted">({{ ns.creaturecount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.creatures %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -196,24 +195,23 @@ <h4>Creatures <small class="text-muted">({{ ns.creaturecount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.iscount > 0 %}
                 <h4>Instants and Sorceries <small class="text-muted">({{ ns.iscount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.is %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -221,24 +219,23 @@ <h4>Instants and Sorceries <small class="text-muted">({{ ns.iscount }})</small><
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.othercount > 0 %}
                 <h4>Other Spells <small class="text-muted">({{ ns.othercount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.other %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -246,23 +243,22 @@ <h4>Other Spells <small class="text-muted">({{ ns.othercount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 <h4>Sideboard <small class="text-muted">({{ ns.sbcount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in article.deck.sideboard|sort(attribute='name') %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -270,7 +266,6 @@ <h4>Sideboard <small class="text-muted">({{ ns.sbcount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
             </div>
         </div>
     </div>

From 17950b916f936e097cbea1e34fd713445037e92c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 17:51:39 +0000
Subject: [PATCH 2/6] Improve mobile layout for MTG deck visual overview

- Increased card size on mobile from 150-250px to 260px for better readability
- Increased stack height to 280px to reduce overlap and improve clarity
- Added 2rem spacing between card type sections
- Added proper margin to section headers to prevent overlap with cards

Cards are now larger and more readable on narrow screens, with clear
separation between Lands, Creatures, Instants/Sorceries, etc.
---
 theme/static/css/main.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 940864e..0f1d0f4 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -115,15 +115,16 @@
     transform: translateX(-50%);
 }
 
-/* Mobile: overlap stacks for compact view */
+/* Mobile: larger cards with moderate overlap within sections */
 @media (max-width: 768px) {
     .mtg-visual-grid {
         grid-template-columns: 1fr;
         gap: 0;
+        margin-bottom: 2rem; /* Space between sections */
     }
 
     .card-stack {
-        height: clamp(120px, 25vw, 180px);
+        height: 280px; /* Taller stacks for better card visibility */
         max-width: 100%;
     }
 
@@ -132,7 +133,14 @@
     }
 
     .overview-card-image {
-        height: clamp(150px, 35vw, 250px);
+        height: 260px; /* Larger cards on mobile */
+    }
+
+    /* Ensure section headers have proper spacing */
+    .card-body h4 {
+        margin-top: 1.5rem;
+        margin-bottom: 1rem;
+        clear: both;
     }
 }
 

From 35ceee93a5de87e38d0ec7212c2c96d860a758ef Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 17:52:21 +0000
Subject: [PATCH 3/6] Fix card overflow on mobile - adjust stack height

Increased mobile stack height from 280px to 380px to properly contain
cards with maximum offset (120px) plus card height (260px).
Added overflow: visible to prevent any clipping of cards.

This fixes the issue where cards were extending beyond the container
border on narrow screens.
---
 theme/static/css/main.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 0f1d0f4..55eb6fe 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -124,8 +124,9 @@
     }
 
     .card-stack {
-        height: 280px; /* Taller stacks for better card visibility */
+        height: 380px; /* Height = max offset (120px) + card height (260px) */
         max-width: 100%;
+        overflow: visible; /* Ensure cards are not clipped */
     }
 
     .card-stack:hover {

From e81fd011a27a084569e447816952cae7c95f7ba9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 17:56:38 +0000
Subject: [PATCH 4/6] Make mobile cards wider and add spacing between stacks

- Changed cards to width-based sizing (up to 340px or 90vw) instead of fixed height
- Cards now maintain proper aspect ratio with height: auto
- Added 1rem gap between stacks for better visual separation
- Cards utilize more horizontal screen space on mobile devices
---
 theme/static/css/main.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 55eb6fe..0874ea3 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -119,7 +119,7 @@
 @media (max-width: 768px) {
     .mtg-visual-grid {
         grid-template-columns: 1fr;
-        gap: 0;
+        gap: 1rem; /* Space between stacks */
         margin-bottom: 2rem; /* Space between sections */
     }
 
@@ -134,7 +134,9 @@
     }
 
     .overview-card-image {
-        height: 260px; /* Larger cards on mobile */
+        height: auto; /* Maintain aspect ratio */
+        width: min(90vw, 340px); /* Wider cards on mobile, up to 340px */
+        max-width: 340px;
     }
 
     /* Ensure section headers have proper spacing */

From f286acad1558a2a63d7668080acddc46a35fd3b9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 18:00:47 +0000
Subject: [PATCH 5/6] Prevent section headers from overlapping with cards on
 mobile

- Increased stack height to 500px to fully contain wider cards
- Added overflow: hidden to stacks (visible on hover) to prevent card spillover
- Increased grid margin-bottom to 3rem for better section separation
- Added z-index and background to headers to ensure they stay above cards
- Added extra margin and padding for proper spacing between sections

Section headers now always appear clearly below the previous section's cards.
---
 theme/static/css/main.css | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 0874ea3..0d066cb 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -120,17 +120,20 @@
     .mtg-visual-grid {
         grid-template-columns: 1fr;
         gap: 1rem; /* Space between stacks */
-        margin-bottom: 2rem; /* Space between sections */
+        margin-bottom: 3rem; /* Extra space to clear last stack's cards */
+        padding-bottom: 1rem; /* Additional padding for safety */
     }
 
     .card-stack {
-        height: 380px; /* Height = max offset (120px) + card height (260px) */
+        height: 500px; /* Increased to fully contain cards: 120px offset + 476px card height */
         max-width: 100%;
-        overflow: visible; /* Ensure cards are not clipped */
+        overflow: hidden; /* Prevent cards from extending beyond stack */
+        margin-bottom: 1rem; /* Extra spacing between stacks */
     }
 
     .card-stack:hover {
         z-index: 100;
+        overflow: visible; /* Allow cards to expand on hover */
     }
 
     .overview-card-image {
@@ -139,11 +142,15 @@
         max-width: 340px;
     }
 
-    /* Ensure section headers have proper spacing */
+    /* Ensure section headers have proper spacing and are never behind cards */
     .card-body h4 {
-        margin-top: 1.5rem;
+        margin-top: 2rem;
         margin-bottom: 1rem;
         clear: both;
+        position: relative;
+        z-index: 10; /* Ensure headers stay above cards */
+        background-color: var(--bs-body-bg, #fff); /* Match background */
+        padding: 0.5rem 0;
     }
 }
 

From 1127f2f147a691dff9a18295cbb1f4317a15ec5e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 28 Dec 2025 18:03:54 +0000
Subject: [PATCH 6/6] Fix card clipping on mobile - increase stack height and
 remove overflow hidden

- Increased stack height from 500px to 600px to accommodate full card height
- Changed overflow from hidden to visible to prevent bottom clipping
- Cards now display fully without being cut off

Headers remain protected by z-index and background styling.
---
 theme/static/css/main.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 0d066cb..70d8fe6 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -125,15 +125,14 @@
     }
 
     .card-stack {
-        height: 500px; /* Increased to fully contain cards: 120px offset + 476px card height */
+        height: 600px; /* Sufficient to contain cards: 120px offset + ~476px card height */
         max-width: 100%;
-        overflow: hidden; /* Prevent cards from extending beyond stack */
+        overflow: visible; /* Allow full cards to display */
         margin-bottom: 1rem; /* Extra spacing between stacks */
     }
 
     .card-stack:hover {
         z-index: 100;
-        overflow: visible; /* Allow cards to expand on hover */
     }
 
     .overview-card-image {