dbmaker/docs/auxiliar/AJUSTES_PREVIEW_A4.md

🎯 Ajustes do Preview A4

✅ Mudanças Implementadas

1. Tamanho do Modal Reduzido para 70%

Antes:

• Modal ocupava até 100% da tela
• Muito grande para telas menores

Depois:

• Modal ocupa 70% da largura da tela (70vw)
• Altura máxima de 90% da tela (90vh)
• Melhor proporção e usabilidade
• Mais espaço ao redor

// Novo tamanho
style={{ maxWidth: '70vw', maxHeight: '90vh' }}

2. Zoom Inicial Reduzido para 40%

Antes:

• Zoom inicial: 100%
• Range: 50% a 200%
• Página muito grande na abertura

Depois:

• Zoom inicial: 40%
• Range: 40% a 200%
• Visualização completa da página ao abrir
• Melhor experiência inicial

// Novo estado inicial
const [zoom, setZoom] = useState(40)

// Novo range mínimo
const handleZoomOut = () => setZoom(prev => Math.max(prev - 10, 40))

3. Header Sticky

• Header fica fixo ao fazer scroll
• Botão de fechar sempre visível
• Melhor navegação

className="sticky top-0 bg-white"

4. Footer Sticky

• Botões de ação ficam fixos ao fazer scroll
• Sempre acessíveis
• Melhor usabilidade

className="sticky bottom-0 bg-white pt-4 border-t"

5. Scroll Controlado

• Conteúdo com scroll independente
• Altura máxima calculada
• Sem overflow do modal

style={{ maxHeight: 'calc(90vh - 100px)' }}

📊 Comparação

Aspecto	Antes	Depois
Largura Modal	100%	70vw
Altura Modal	100%	90vh
Zoom Inicial	100%	40%
Zoom Mínimo	50%	40%
Header	Normal	Sticky
Footer	Normal	Sticky
Scroll	Página	Conteúdo

🎯 Benefícios

✅ Melhor Proporção: Modal não ocupa toda a tela ✅ Visualização Completa: Zoom 40% mostra página inteira ✅ Navegação Fácil: Header e footer sempre visíveis ✅ Scroll Suave: Conteúdo com scroll independente ✅ Responsivo: Funciona bem em diferentes tamanhos ✅ Profissional: Espaço ao redor do modal

🎨 Layout Visual

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │ Preview - Capa Frontal                          [X] │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │                                                     │   │
│  │  ┌─────────────────────────────────────────────┐   │   │
│  │  │                                             │   │   │
│  │  │  [−] [40%] [+] | [100% Reset]              │   │   │
│  │  │                                             │   │   │
│  │  │  ┌─────────────────────────────────────┐   │   │   │
│  │  │  │                                     │   │   │   │
│  │  │  │  Página A4 em 40% (completa)       │   │   │   │
│  │  │  │                                     │   │   │   │
│  │  │  │  (Scroll se necessário)             │   │   │   │
│  │  │  │                                     │   │   │   │
│  │  │  └─────────────────────────────────────┘   │   │   │
│  │  │                                             │   │   │
│  │  │  [Fechar] [Exportar]                        │   │   │
│  │  │                                             │   │   │
│  │  └─────────────────────────────────────────────┘   │   │
│  │                                                     │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

🔧 Implementação Técnica

Modal Customizado

// Modal com 70% de largura
<div style={{ maxWidth: '70vw', maxHeight: '90vh' }}>
  {/* Conteúdo */}
</div>

// Header sticky
<div className="sticky top-0 bg-white">
  {/* Header */}
</div>

// Conteúdo com scroll
<div style={{ maxHeight: 'calc(90vh - 100px)' }}>
  {/* Preview */}
</div>

// Footer sticky
<div className="sticky bottom-0 bg-white pt-4 border-t">
  {/* Botões */}
</div>

Zoom Inicial

// Estado inicial em 40%
const [zoom, setZoom] = useState(40)

// Range de 40% a 200%
const handleZoomOut = () => setZoom(prev => Math.max(prev - 10, 40))
const handleZoomIn = () => setZoom(prev => Math.min(prev + 10, 200))

📱 Responsividade

Tamanho	Comportamento
Desktop (1920px)	Modal 70% = 1344px
Laptop (1366px)	Modal 70% = 956px
Tablet (768px)	Modal 70% = 538px
Mobile (375px)	Modal 70% = 262px

🎯 Casos de Uso

Zoom 40% (Inicial)

• Ver página inteira
• Entender layout completo
• Visão geral do design

Zoom 50-75%

• Visualização confortável
• Ler conteúdo
• Revisar estrutura

Zoom 100%

• Tamanho real A4
• Editar detalhes
• Revisar tipografia

Zoom 150%+

• Detalhar elementos
• Verificar cores
• Revisar precisão

✅ Checklist

• Modal reduzido para 70vw
• Altura máxima 90vh
• Zoom inicial em 40%
• Range mínimo 40%
• Header sticky
• Footer sticky
• Scroll controlado
• Sem erros
• Responsivo
• Pronto para produção

🎉 Resultado

Agora quando você abre o preview:

• ✅ Modal ocupa 70% da tela
• ✅ Zoom inicial em 40% (página inteira visível)
• ✅ Header e footer sempre acessíveis
• ✅ Scroll suave do conteúdo
• ✅ Experiência profissional

---

Data: Novembro 2024
Versão: 1.2.0
Status: ✅ Pronto para Produção