From a6f5e756c27264f0329b29cff8f8dcc4239a0973 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Wed, 8 Apr 2026 16:07:13 +0200
Subject: [PATCH] fix: Canvas skaliert auf Container-Breite statt fixe 1200px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- editor.js: PDF/Bild-Render nutzt jetzt die tatsächliche Breite des
  .bericht-canvas-wrap Containers (max 1200), damit die mittlere Spalte
  nicht überquillt und die Seiten-Sidebar sichtbar bleibt
- CSS: grid-template-columns nutzt minmax(0, 1fr) um Überlauf zu
  verhindern, #pdf-canvas hat max-width:100%

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 css/bericht.css |  6 ++++--
 js/editor.js    | 29 ++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/css/bericht.css b/css/bericht.css
index 0419fb6..c80f416 100644
--- a/css/bericht.css
+++ b/css/bericht.css
@@ -9,7 +9,9 @@
 
 .bericht-layout {
     display: grid;
-    grid-template-columns: 280px 1fr 200px;
+    /* minmax(0, 1fr) verhindert, dass die mittlere Spalte über die verfügbare
+       Breite hinaus wächst, wenn der Canvas-Inhalt zu breit wird */
+    grid-template-columns: 260px minmax(0, 1fr) 220px;
     gap: 12px;
     align-items: start;
 }
@@ -105,7 +107,7 @@
     padding: 10px; border-radius: 4px;
     display: flex; align-items: flex-start; justify-content: center;
 }
-#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
+#pdf-canvas { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.4); max-width: 100%; height: auto; }
 #fabric-canvas.fabric-overlay { position: absolute !important; pointer-events: auto; }
 
 .bericht-page-note { margin-top: 8px; }
diff --git a/js/editor.js b/js/editor.js
index 472eb6d..cd04d1b 100644
--- a/js/editor.js
+++ b/js/editor.js
@@ -90,15 +90,30 @@
         await loadPageMeta();
     }
 
+    /**
+     * Liefert die nutzbare Breite des Canvas-Containers (minus Padding).
+     * Begrenzt auf 1200px, damit auch auf großen Screens nicht alles riesig wird.
+     */
+    function getTargetCanvasWidth() {
+        const wrap = document.querySelector('.bericht-canvas-wrap');
+        if (!wrap) return 800;
+        const cs = getComputedStyle(wrap);
+        const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+        const avail = wrap.clientWidth - padX - 4; // 4px Sicherheitsabstand
+        return Math.max(300, Math.min(1200, Math.floor(avail)));
+    }
+
     async function renderPdf(arrayBuffer) {
         if (!window.pdfjsLib) { console.error('PDF.js nicht geladen'); return; }
         const pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-        // Mehrseitige PDFs werden serverseitig pro Seite als eigene bericht_page abgelegt,
-        // hier rendern wir immer Seite 1 dieses Source-PDFs — die Original-Seitennummer
-        // (source_page) kümmert sich um die Auswahl beim Finalisieren.
         const pageNum = 1;
         const page = await pdfDoc.getPage(pageNum);
-        const viewport = page.getViewport({ scale: 1.5 });
+        // Ziel-Breite ermitteln und Skalierung berechnen, damit die Seite in den
+        // Container passt (statt feste scale=1.5)
+        const target = getTargetCanvasWidth();
+        const baseViewport = page.getViewport({ scale: 1 });
+        const scale = target / baseViewport.width;
+        const viewport = page.getViewport({ scale: scale });
         pdfCanvas.width = viewport.width;
         pdfCanvas.height = viewport.height;
         const ctx = pdfCanvas.getContext('2d');
@@ -112,9 +127,9 @@
         await new Promise((res) => {
             const img = new Image();
             img.onload = () => {
-                // Skalierung auf max 1200px Breite
-                const maxW = 1200;
-                const ratio = img.width > maxW ? maxW / img.width : 1;
+                // Auf Container-Breite skalieren statt fixe 1200px
+                const target = getTargetCanvasWidth();
+                const ratio = img.width > target ? target / img.width : 1;
                 pdfCanvas.width = img.width * ratio;
                 pdfCanvas.height = img.height * ratio;
                 const ctx = pdfCanvas.getContext('2d');