diff --git a/css/bericht.css b/css/bericht.css index 0ccc497..fa265cb 100644 --- a/css/bericht.css +++ b/css/bericht.css @@ -62,8 +62,9 @@ border: 1px solid var(--colorboxbordertitle1, transparent); border-radius: 6px; padding: 10px; - min-height: 80vh; display: flex; flex-direction: column; + /* keine min-height — Container so groß wie Inhalt */ + max-height: calc(100vh - 220px); } .bericht-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; diff --git a/js/editor.js b/js/editor.js index 8833f8f..88974ec 100644 --- a/js/editor.js +++ b/js/editor.js @@ -60,6 +60,13 @@ bindExtraUpload(); bindActions(); bindSortable(); + + // Window-Resize: Canvas neu skalieren (debounced) + let resizeTimer = null; + window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(() => { rerenderCurrent(); }, 200); + }); } /* ---------- Seiten laden ---------- */ @@ -103,15 +110,16 @@ /** * Liefert die nutzbare Breite des Canvas-Containers (minus Padding). - * Begrenzt auf 1200px, damit auch auf großen Screens nicht alles riesig wird. + * KEINE harte Obergrenze — der Canvas füllt immer die volle verfügbare + * Breite der mittleren Spalte aus. */ 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))); + const avail = wrap.clientWidth - padX - 4; + return Math.max(300, Math.floor(avail)); } async function renderPdf(arrayBuffer) {