From 2b5062df0800bbf868f1a5226e8b844b179c8440 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 14:06:37 +0200
Subject: [PATCH] fix: Scorecard-Browser-Skalierung via JS (CSS
 calc-scale-Unit-Mismatch behoben)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mein vorheriger CSS-Versuch transform: scale(calc(min(1080px, 100vw-40px)
/ 1080)) liefert eine px-Ausgabe — scale() braucht aber unitless. Folge:
keine Skalierung, Card wird nur abgeschnitten (auf Phone sah man nur
linkes Ecke).

Fix: JS-basiert. adjustScale() berechnet das Verhaeltnis
window.innerWidth/1080 (max 1.0 bei Desktop), setzt transform: scale()
auf .card und passt die .card-viewport-Dimensionen an. Re-fired bei
window.resize + load.

WeasyPrint fuehrt kein JS aus → PDF unbeeinflusst (Card bleibt 1:1
1080×1350).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../v2/screens/scorecard_portrait.html        | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/templates/v2/screens/scorecard_portrait.html b/app/templates/v2/screens/scorecard_portrait.html
index 93e5b67..0972fa8 100644
--- a/app/templates/v2/screens/scorecard_portrait.html
+++ b/app/templates/v2/screens/scorecard_portrait.html
@@ -44,7 +44,10 @@
   }
 
   /* Browser-Preview — skaliert die Card auf Viewport-Breite, scrollbar
-     wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen. */
+     wenn die Hoehe nicht reicht. WeasyPrint ignoriert @media screen.
+     Die eigentliche Skalierung wird per JS gesetzt (CSS calc/scale
+     mit Unit-Mismatch geht nicht), CSS-Defaults sorgen nur fuer das
+     Drumherum. */
   @media screen {
     html, body {
       background: #2a2724 !important;
@@ -61,15 +64,14 @@
       align-items: flex-start;
     }
     .card-viewport {
-      width: min(1080px, calc(100vw - 40px));
-      aspect-ratio: 1080 / 1350;
+      width: 1080px;
+      height: 1350px;
       overflow: hidden;
       position: relative;
       box-shadow: 0 30px 80px rgba(0,0,0,0.5);
       background: var(--paper);
     }
     .card {
-      transform: scale(calc(min(1080px, 100vw - 40px) / 1080));
       transform-origin: top left;
       position: absolute;
       top: 0; left: 0;
@@ -264,5 +266,34 @@
 </div>
 </div>{# .card-viewport #}
 
+<script>
+/* Browser-Preview-Skalierung: passt die 1080×1350-Card proportional auf
+   den verfuegbaren Viewport an. WeasyPrint fuehrt kein JS aus → PDF
+   bleibt bei skalierungsfreier Originalgroesse. */
+(function () {
+  function adjustScale() {
+    var card = document.querySelector('.card');
+    var viewport = document.querySelector('.card-viewport');
+    if (!card || !viewport) return;
+    var pad = 40;
+    var availW = window.innerWidth  - pad;
+    var availH = window.innerHeight - pad;
+    var scaleW = availW / 1080;
+    var scaleH = availH / 1350;
+    var scale  = Math.min(scaleW, 1);   // bei Desktop nicht hochskalieren
+    if (availH < 1350) {
+      // Wenn die Hoehe nicht reicht: scrollen statt nochmal verkleinern
+      // (User kann scrollen, lieber lesbar als mini).
+    }
+    card.style.transform = 'scale(' + scale + ')';
+    viewport.style.width  = (1080 * scale) + 'px';
+    viewport.style.height = (1350 * scale) + 'px';
+  }
+  adjustScale();
+  window.addEventListener('resize', adjustScale);
+  window.addEventListener('load', adjustScale);
+})();
+</script>
+
 </body>
 </html>