data/bericht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Canvas füllt volle Breite (kein 1200px-Limit) + Resize-Listener
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
Details

Browse source 
Auf Wide-Screens (>1200px mittlere Spalte) blieb rechts vom Bild ein
großer leerer Streifen, weil getTargetCanvasWidth auf 1200px gedeckelt
war. Jetzt nimmt der Canvas immer die volle Container-Breite ein.
Bei Browser-Resize wird die aktuelle Seite neu gerendert.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
This commit is contained in:
Eduard Wisch 2026-04-08 16:15:31 +02:00
parent 40fb738ccf
commit 532d8e0c98
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
css/bericht.css
View file

@ -62,8 +62,9 @@
border: 1px solid var(--colorboxbordertitle1, transparent); border: 1px solid var(--colorboxbordertitle1, transparent);
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
min-height: 80vh;
display: flex; flex-direction: column; display: flex; flex-direction: column;
/* keine min-height — Container so groß wie Inhalt */
max-height: calc(100vh - 220px);
} }
.bericht-toolbar { .bericht-toolbar {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center; display: flex; flex-wrap: wrap; gap: 4px; align-items: center;

14
js/editor.js
View file

@ -60,6 +60,13 @@
bindExtraUpload(); bindExtraUpload();
bindActions(); bindActions();
bindSortable(); bindSortable();
// Window-Resize: Canvas neu skalieren (debounced)
let resizeTimer = null;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => { rerenderCurrent(); }, 200);
});
} }
/* ---------- Seiten laden ---------- */ /* ---------- Seiten laden ---------- */
@ -103,15 +110,16 @@
/** /**
* Liefert die nutzbare Breite des Canvas-Containers (minus Padding). * 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() { function getTargetCanvasWidth() {
const wrap = document.querySelector('.bericht-canvas-wrap'); const wrap = document.querySelector('.bericht-canvas-wrap');
if (!wrap) return 800; if (!wrap) return 800;
const cs = getComputedStyle(wrap); const cs = getComputedStyle(wrap);
const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
const avail = wrap.clientWidth - padX - 4; // 4px Sicherheitsabstand const avail = wrap.clientWidth - padX - 4;
return Math.max(300, Math.min(1200, Math.floor(avail))); return Math.max(300, Math.floor(avail));
} }
async function renderPdf(arrayBuffer) { async function renderPdf(arrayBuffer) {