From d9c64f34b1421c929ea765cdce12029597848518 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 22:16:15 +0000
Subject: [PATCH] .

---
 cards/templates/cards/_card_hero_styles.html |  31 ++++++++-----------
 cards/templates/cards/print.html             |   2 +-
 cards/templates/cards/printable.html         |   2 ++
 db.sqlite3                                   | Bin 151552 -> 151552 bytes
 4 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/cards/templates/cards/_card_hero_styles.html b/cards/templates/cards/_card_hero_styles.html
index fe4729e..75569b3 100644
--- a/cards/templates/cards/_card_hero_styles.html
+++ b/cards/templates/cards/_card_hero_styles.html
@@ -1,24 +1,19 @@
 <style>
-  /* Canonical card size variables used by preview and printable views so
-     the card internal layout is identical between screen and print. These
-     defaults can be overridden by wrappers if needed. Units are in mm to
-     match print sizing. */
-  :root{
-    --card-width: 83mm;    /* default card width */
-    --card-height: 120mm;  /* default card height */
+  /* Shared hero image rules used by both preview (base.html) and printable view.
+     This file no longer forces global card dimensions (those break the list
+     view). When a canonical card size is needed (printable/preview) a
+     `.card-canonical` ancestor or explicit CSS variables should be provided
+     (eg. `--card-width`/`--card-height`). We fall back to sensible defaults
+     so components degrade gracefully. */
+
+  .toptrump-card{ box-sizing:border-box; overflow:hidden; border-radius:8px; background-clip:padding-box; }
+
+  .card-canonical .toptrump-card {
+    width: var(--card-width, 83mm);
+    height: var(--card-height, 120mm);
   }
 
-  /* Shared hero image rules used by both preview (base.html) and printable view */
-  .toptrump-card{
-    width:var(--card-width);
-    height:var(--card-height);
-    box-sizing:border-box;
-    overflow:hidden;
-    border-radius:8px;
-    background-clip:padding-box;
-  }
-
-  .toptrump-card .hero-image{height:calc(var(--card-height) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
+  .toptrump-card .hero-image{height:calc(var(--card-height, 120mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
 
   /* For most designs center the dino image absolutely and allow an inline
      scale transform (the fragments provide `transform: translate(...) scale(...)`). */
diff --git a/cards/templates/cards/print.html b/cards/templates/cards/print.html
index d86a5be..43f112a 100644
--- a/cards/templates/cards/print.html
+++ b/cards/templates/cards/print.html
@@ -76,7 +76,7 @@
               <div style="font-weight:700">Sample</div>
               <button id="sample-hide-btn" type="button" style="border:0; background:transparent; cursor:pointer; font-weight:700">✕</button>
             </div>
-            <div id="sample-preview" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
+            <div id="sample-preview" class="card-canonical" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
               {% comment %} Render all design fragments hidden and toggle via JS. Each fragment should contain a `.toptrump-card`. {% endcomment %}
               <div class="design-preview design-1" style="display:none">
                 {% include 'cards/_card_inner_design1.html' with card=sample_card background=background %}
diff --git a/cards/templates/cards/printable.html b/cards/templates/cards/printable.html
index 60da866..3099466 100644
--- a/cards/templates/cards/printable.html
+++ b/cards/templates/cards/printable.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Printable cards</title>
     <style>
+      /* Canonical card size for printable view */
+      :root{ --card-width: 83mm; --card-height: 120mm; }
       /* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */
       @page { size: A4 portrait; margin: 12mm; }
       html,body{height:100%; margin:0; padding:0;}
diff --git a/db.sqlite3 b/db.sqlite3
index 2707ba9a10a287c752643ec7327a0af499db02ab..b93ff934238b5b6ae601f1b13cf5f6ebc1abed6d 100644
GIT binary patch
delta 153
zcmV;K0A~Mypb3DW36L8BtC1W-0jq&vg<t`-U;?5a7ViKX4{8Swx(}-l+Yi<c>JQ})
z;19@`8Xy8A0l&9AAOeFA1_c8F0SFG4#V-Op83$be3I(tL4?GF+4RZ#M2^R~w3fu@f
z1+cdoFankZ5`kO}4*(@09}PhP0s%pRbpZjFZ#M#&0S%L#k}?4Zmyb3A&IAmb0NuA?
HHv*p+wxcU%

delta 125
zcmV-@0D}L3pb3DW36L8Bs*xN+0jhyug<t`-U;?5a7{34;4{8Jtx(}-l+Yi<c>JQ})
z;19?T!<QH!0wcFQAOeC91`qE51Ox+@#V-Op84Q~M3I>k=4?GF+4RZ#M2^R~w3fu@f
f2VJ)sFankZldzTFmyb3A&IEy44iC3sHv*p+->oM~