diff --git a/public/app.js b/public/app.js index f7f5362..383bd50 100644 --- a/public/app.js +++ b/public/app.js @@ -3238,6 +3238,19 @@ const initApp = () => { btnExportPdf.style.borderColor = 'var(--brand-green)'; btnExportPdf.style.color = 'var(--brand-green)'; + // Rolar suavemente até o relatório no mobile + if (window.innerWidth <= 768) { + const modalBody = emitirRelatorioModal.querySelector('.settings-modal-body'); + if (modalBody) { + setTimeout(() => { + modalBody.scrollTo({ + top: modalBody.scrollHeight, + behavior: 'smooth' + }); + }, 150); + } + } + } catch (err) { console.error('Erro ao gerar relatório compilado:', err); emitirReportPreviewArea.innerHTML = ` diff --git a/public/style.css b/public/style.css index 5cc5b74..3e1a109 100644 --- a/public/style.css +++ b/public/style.css @@ -1503,6 +1503,61 @@ code { .welcome-container h2 { font-size: 20px; } + + /* Ajustes para modais no mobile para evitar overflow e corte de conteúdo */ + .settings-modal-content { + width: 95% !important; + max-height: 92dvh !important; + height: auto !important; + } + + /* Modal de Emitir Relatório */ + #emitirRelatorioModal .settings-modal-body { + overflow-y: auto !important; /* Permite rolar todo o corpo do modal no mobile */ + max-height: calc(92dvh - 60px) !important; /* Garante que o body não passe do modal content */ + display: flex !important; + flex-direction: column !important; + } + + /* Ajustar filtros no mobile para não ocupar muito espaço horizontal mas quebrar bem */ + #emitirRelatorioModal .settings-modal-body > div:first-child { + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; + } + + /* O visualizador do relatório no mobile precisa de uma altura definida para não colapsar */ + #emitirRelatorioModal .settings-modal-body > div:last-child { + flex: none !important; + height: 420px !important; /* Altura fixa garantida no mobile */ + min-height: 420px !important; + display: flex !important; + flex-direction: column !important; + } + + /* Garantir que a área de preview interna também role */ + #emitirReportPreviewArea { + flex: 1 !important; + overflow-y: auto !important; + } + + /* Ajustes para o modal de Modelos de Relatório */ + #modelosRelatorioModal .settings-modal-body { + overflow-y: auto !important; + flex-direction: column !important; /* Em vez de row (lado a lado), fica coluna */ + max-height: calc(92dvh - 60px) !important; + min-height: auto !important; + } + + #modelosRelatorioModal .settings-modal-body > div:first-child { + border-right: none !important; + border-bottom: 1px solid var(--border-light); + padding-right: 0 !important; + padding-bottom: 16px !important; + } + + #modelosRelatorioModal .settings-modal-body > div:last-child { + padding-left: 0 !important; + padding-top: 16px !important; + } } @media (min-width: 769px) {