From 0b5dcba8f919b5056b37646b687e3b50034dbd52 Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 14:11:38 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Scorecard-Browser=20=E2=80=94=20skalier?=
 =?UTF-8?q?t=20auf=2090=20%=20Viewport-Hoehe=20(mit=20Width-Fallback)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User: 'Skaliere die Scorecard so, dass sie die Hoehe des Browser
Viewports Minus 10% einnimmt'

Vorherige Logik nahm scaleByWidth, capped auf 1.0. Jetzt zwei Faktoren
und das kleinere gewinnt:
- scaleByHeight = window.innerHeight * 0.9 / 1350
- scaleByWidth  = (window.innerWidth - 40) / 1080
- scale = min(beiden, max 1.0)

Auf einem 1440×900-Desktop ergibt das scale 0.6 (= 90% × 900 / 1350),
Card 648×810. Auf einem 390-px-Phone gewinnt die Breite-Begrenzung,
Card skaliert kleiner damit horizontal nichts abgeschnitten wird.

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

diff --git a/app/templates/v2/screens/scorecard_portrait.html b/app/templates/v2/screens/scorecard_portrait.html
index 0972fa8..1c67b50 100644
--- a/app/templates/v2/screens/scorecard_portrait.html
+++ b/app/templates/v2/screens/scorecard_portrait.html
@@ -267,9 +267,10 @@
 </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. */
+/* Browser-Preview-Skalierung: Card soll 90 % der Viewport-Hoehe einnehmen.
+   Falls die daraus resultierende Breite ueber den Viewport hinausginge
+   (schmale Mobile-Viewports), greift die Breiten-Begrenzung. WeasyPrint
+   fuehrt kein JS aus → PDF bleibt bei skalierungsfreier Originalgroesse. */
 (function () {
   function adjustScale() {
     var card = document.querySelector('.card');
@@ -278,13 +279,10 @@
     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).
-    }
+    var scaleByHeight = (window.innerHeight * 0.9) / 1350;
+    var scaleByWidth  = availW / 1080;
+    var scale = Math.min(scaleByHeight, scaleByWidth);
+    if (scale > 1) scale = 1;  // nie ueber 100% hochskalieren
     card.style.transform = 'scale(' + scale + ')';
     viewport.style.width  = (1080 * scale) + 'px';
     viewport.style.height = (1350 * scale) + 'px';