templates/preview: background do papel cobre 100% da altura

Bug: container .dte-preview era display:flex + justify-content:center.
Em alguns navegadores, o flex limitava a altura intrinseca do
.dte-preview__doc (papel) quando o conteudo crescia — background
branco ficava com a altura do menor item e o conteudo "vazava".

Fix: container vira block normal com overflow-y:auto. Doc
centralizado via margin:0 auto (em vez de justify-content). Adiciona
box-sizing:border-box + height:auto + overflow:visible no doc pra
garantir que o background cresce com o conteudo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-21 17:04:21 -03:00
parent c7e311b851
commit c9afe8f009
@@ -368,6 +368,9 @@ function onSave() {
} }
/* ═══════ Preview ═══════ */ /* ═══════ Preview ═══════ */
/* Container externo: scroll vertical interno + fundo sutil.
NÃO usa flex (que limitava a altura intrínseca do doc) — usa
block normal com o doc centralizado via margin auto. */
.dte-preview { .dte-preview {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
@@ -376,8 +379,6 @@ function onSave() {
border: 1px solid var(--surface-border); border: 1px solid var(--surface-border);
border-radius: 10px; border-radius: 10px;
padding: 24px; padding: 24px;
display: flex;
justify-content: center;
} }
.dte-preview__doc { .dte-preview__doc {
background: white; background: white;
@@ -386,11 +387,17 @@ function onSave() {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
width: 100%; width: 100%;
max-width: 794px; /* ≈ A4 a 96dpi */ max-width: 794px; /* ≈ A4 a 96dpi */
margin: 0 auto;
padding: 48px 56px; padding: 48px 56px;
font-family: 'Segoe UI', Arial, sans-serif; font-family: 'Segoe UI', Arial, sans-serif;
font-size: 12pt; font-size: 12pt;
line-height: 1.6; line-height: 1.6;
min-height: 500px; min-height: 500px;
/* Garante que o background-white cresce com o conteúdo
(em vez de ficar travado no min-height quando o doc é grande) */
box-sizing: border-box;
height: auto;
overflow: visible;
} }
.dte-preview__header { .dte-preview__header {
text-align: center; text-align: center;