From db8231646170333fc78ed510af9d6dac1fb438f9 Mon Sep 17 00:00:00 2001 From: marcoitaloesp-ai Date: Tue, 16 Dec 2025 08:29:57 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20v1.39.2=20-=20FIX=20CR=C3=8DTICO?= =?UTF-8?q?:=20Responsividade=20iPhone=20for=C3=A7ada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CSS anterior não aplicava devido a conflitos de especificidade. Adicionado regras com maior prioridade em TODOS estilos críticos: SIDEBAR MOBILE (<768px): - width: 60px forçado - app-main margin-left: 60px forçado - Texto/logos escondidos (display/opacity/visibility none) - Links centralizados, padding 0.75rem SIDEBAR ULTRA-COMPACTA (<430px): - width: 56px forçado - app-main margin-left: 56px forçado SIDEBAR LANDSCAPE: - width: 50px forçado - app-main margin-left: 50px forçado LAYOUT OTIMIZADO: - Cards: padding 0.5-0.75rem reduzido - Containers: padding 0.5rem - Row margins: -0.25rem para aproveitar espaço - Modais: margin 0.5rem, max-width otimizada - Tabelas: font 0.8rem, padding ultra-compacto SAFE AREAS: - app-sidebar: padding-top/bottom com env() - app-main: padding-bottom com env() - Modais: margins com calc() PWA STANDALONE: - overscroll-behavior none - sidebar position fixed, overflow-y auto Deploy: frontend/dist completamente substituído --- CHANGELOG.md | 20 +++ VERSION | 2 +- frontend/src/index.css | 289 +++++++++++++++++++++++++++++++---------- 3 files changed, 243 insertions(+), 68 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9661f6c..094b584 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,26 @@ O formato segue [Keep a Changelog](https://keepachangelog.com/pt-BR/). Este projeto adota [Versionamento Semântico](https://semver.org/pt-BR/). +## [1.39.2] - 2025-12-16 + +### Fixed +- **Responsividade iPhone CORRIGIDA** - CSS com !important para forçar aplicação + - Sidebar forçada para 60px em mobile (<768px) com !important + - Sidebar extra-compacta (56px) em telas <430px + - Sidebar 50px em landscape mode (<430px altura) + - App-main margin-left ajustado automaticamente + - Texto sidebar 100% escondido em mobile (display/opacity/visibility: none) + - Touch targets 44x44px em todos elementos interativos + - Safe area insets aplicadas a sidebar e app-main + - Cards ultra-compactas: padding 0.5rem em <430px + - Gráficos: 250px (portrait) / 180px (landscape) + - Modais: margin 0.5rem, width calc(100% - 1rem) + - Row margins: -0.25rem para aproveitar espaço + - Tabelas: font 0.8rem, padding 0.3rem/0.2rem + - Inputs: font-size 16px para prevenir zoom + - PWA: overscroll-behavior none, sidebar fixed position + - Todos os !important necessários para sobrescrever CSS existente + ## [1.39.1] - 2025-12-16 ### Fixed diff --git a/VERSION b/VERSION index 0c11aad..ecbe9df 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.39.1 +1.39.2 diff --git a/frontend/src/index.css b/frontend/src/index.css index 15f438d..dd38e0a 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2442,116 +2442,249 @@ a.btn, .form-check-input, .form-switch .form-check-input, .dropdown-toggle, -.nav-link { - min-height: 44px; - min-width: 44px; +.nav-link, +.sidebar-link, +.sidebar-group-toggle { + min-height: 44px !important; + min-width: 44px !important; touch-action: manipulation; /* Desabilita zoom duplo-toque */ } +/* Forçar sidebar colapsada em mobile (<768px) */ +@media (max-width: 768px) { + .app-sidebar { + width: 60px !important; + } + + .app-main { + margin-left: 60px !important; + } + + /* Forçar esconder texto em mobile */ + .app-sidebar .logo-brand, + .app-sidebar .sidebar-link-text, + .app-sidebar .user-details, + .app-sidebar .user-name, + .app-sidebar .user-email { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } + + /* Centralizar ícones */ + .app-sidebar .sidebar-link { + justify-content: center !important; + padding: 0.75rem !important; + } + + .app-sidebar .sidebar-group-toggle { + justify-content: center !important; + padding: 0.75rem !important; + } + + /* Ajustar conteúdo principal */ + .app-content { + padding: 0.75rem !important; + } + + .container-fluid { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + } +} + /* Cards e containers em telas pequenas */ @media (max-width: 576px) { .card { - margin-bottom: 1rem; + margin-bottom: 0.75rem !important; + border-radius: 0.75rem !important; } .card-body { - padding: 1rem; + padding: 0.75rem !important; } /* Reduz padding em modais para mais espaço */ .modal-body { - padding: 1rem; + padding: 0.75rem !important; } .modal-header { - padding: 0.75rem 1rem; + padding: 0.75rem 1rem !important; } .modal-footer { - padding: 0.75rem 1rem; + padding: 0.75rem 1rem !important; } /* Ajusta gráficos para telas pequenas */ canvas { max-height: 250px !important; } -} - -/* Otimizações para iPhone em modo portrait */ -@media (max-width: 430px) { - /* iPhone 14 Pro Max e menores */ - /* Ajusta tamanho de fonte para melhor legibilidade */ - body { - font-size: 10pt; - } - - h1 { font-size: 1.5rem; } - h2 { font-size: 1.35rem; } - h3 { font-size: 1.25rem; } - h4 { font-size: 1.15rem; } - h5 { font-size: 1rem; } - h6 { font-size: 0.95rem; } - - /* Reduz padding global */ - .container, - .container-fluid { - padding-left: 0.75rem; - padding-right: 0.75rem; - } - - /* Otimiza stat cards */ + /* Stat cards mais compactas */ .stat-card .card-body { - padding: 0.75rem !important; + padding: 0.5rem !important; } - /* Tabelas responsivas */ + /* Tabelas mais compactas */ .table { - font-size: 10pt; + font-size: 0.85rem !important; } .table td, .table th { - padding: 0.5rem 0.25rem; + padding: 0.4rem 0.3rem !important; + } +} + +/* Otimizações para iPhone em modo portrait (<430px) */ +@media (max-width: 430px) { + /* iPhone 14 Pro Max e menores */ + + /* Forçar sidebar ainda mais compacta */ + .app-sidebar { + width: 56px !important; + } + + .app-main { + margin-left: 56px !important; + } + + /* Ajusta tamanho de fonte para melhor legibilidade */ + body { + font-size: 10pt !important; + } + + h1, .h1 { font-size: 1.4rem !important; } + h2, .h2 { font-size: 1.25rem !important; } + h3, .h3 { font-size: 1.15rem !important; } + h4, .h4 { font-size: 1.05rem !important; } + h5, .h5 { font-size: 0.95rem !important; } + h6, .h6 { font-size: 0.9rem !important; } + + /* Reduz padding global */ + .container, + .container-fluid { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; + } + + /* Otimiza stat cards */ + .stat-card .card-body { + padding: 0.5rem !important; + } + + .stat-card .card-body > div { + font-size: 0.9rem !important; + } + + /* Cards mais compactos */ + .card { + margin-bottom: 0.5rem !important; + } + + .card-body { + padding: 0.625rem !important; + } + + .card-header { + padding: 0.5rem 0.625rem !important; } /* Ajusta inputs e selects */ .form-control, .form-select { font-size: 16px !important; /* Previne zoom no iOS */ - padding: 0.625rem 0.75rem; + padding: 0.5rem 0.625rem !important; + } + + .form-label { + font-size: 0.85rem !important; + margin-bottom: 0.25rem !important; } /* Botões em telas muito pequenas */ .btn { - padding: 0.625rem 0.875rem; + padding: 0.5rem 0.75rem !important; + font-size: 0.9rem !important; + } + + .btn-sm { + padding: 0.375rem 0.5rem !important; + font-size: 0.8rem !important; } /* Gráficos ainda menores */ canvas { max-height: 220px !important; } + + /* Modais otimizados */ + .modal-dialog { + margin: 0.5rem !important; + max-width: calc(100% - 1rem) !important; + } + + .modal-content { + border-radius: 1rem !important; + } + + /* Tabelas ultra-compactas */ + .table { + font-size: 0.8rem !important; + } + + .table td, + .table th { + padding: 0.3rem 0.2rem !important; + } + + /* Dashboard widgets */ + .row { + margin-left: -0.25rem !important; + margin-right: -0.25rem !important; + } + + .row > * { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; + } } /* iPhone em landscape (horizontal) */ @media (max-height: 430px) and (orientation: landscape) { + /* Sidebar ainda mais compacta em landscape */ + .app-sidebar { + width: 50px !important; + } + + .app-main { + margin-left: 50px !important; + } + /* Reduz altura de elementos */ .card-body { - padding: 0.75rem; + padding: 0.5rem !important; } .modal-dialog { - max-height: 90vh; + max-height: 90vh !important; } .modal-body { - max-height: 60vh; - overflow-y: auto; + max-height: 60vh !important; + overflow-y: auto !important; } canvas { max-height: 180px !important; } + + /* Header mais compacto */ + .app-header { + padding: 0.5rem 1rem !important; + } } /* Previne problemas de input no iOS */ @@ -2563,68 +2696,90 @@ input[type="tel"], input[type="date"], select, textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border-radius: 0.375rem; /* iOS reseta border-radius */ + -webkit-appearance: none !important; + -moz-appearance: none !important; + appearance: none !important; + border-radius: 0.375rem !important; /* iOS reseta border-radius */ } /* Fix para dropdowns em iOS */ .dropdown-menu { - -webkit-overflow-scrolling: touch; - max-height: calc(100vh - 100px); - overflow-y: auto; + -webkit-overflow-scrolling: touch !important; + max-height: calc(100vh - 100px) !important; + overflow-y: auto !important; } /* Melhora scroll em listas/tabelas */ .table-responsive, .overflow-auto { - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch !important; } /* Previne seleção acidental de texto ao tocar */ .btn, .card-header, .modal-header, -.alert { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; +.alert, +.sidebar-link, +.sidebar-group-toggle { + -webkit-user-select: none !important; + -moz-user-select: none !important; + user-select: none !important; } /* Melhora tap highlight no iOS */ button, a, .btn, -.clickable { - -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2); +.clickable, +.sidebar-link, +.sidebar-group-toggle { + -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2) !important; } /* Safe area para notch/Dynamic Island */ @supports (padding: max(0px)) { body { - padding-top: max(env(safe-area-inset-top), 0px); - padding-bottom: max(env(safe-area-inset-bottom), 0px); - padding-left: max(env(safe-area-inset-left), 0px); - padding-right: max(env(safe-area-inset-right), 0px); + padding-top: max(env(safe-area-inset-top), 0px) !important; + padding-bottom: max(env(safe-area-inset-bottom), 0px) !important; + padding-left: max(env(safe-area-inset-left), 0px) !important; + padding-right: max(env(safe-area-inset-right), 0px) !important; } - /* Ajusta navbar fixa com safe area */ - .navbar { - padding-top: calc(0.5rem + env(safe-area-inset-top)); + /* Ajusta sidebar fixa com safe area */ + .app-sidebar { + padding-top: env(safe-area-inset-top) !important; + padding-bottom: env(safe-area-inset-bottom) !important; + } + + /* Ajusta content com safe area */ + .app-main { + padding-bottom: env(safe-area-inset-bottom) !important; } /* Ajusta modais com safe area */ .modal-dialog { - margin-top: calc(1.75rem + env(safe-area-inset-top)); - margin-bottom: calc(1.75rem + env(safe-area-inset-bottom)); + margin-top: calc(1rem + env(safe-area-inset-top)) !important; + margin-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; } } /* PWA: Remove bounce scroll quando instalado */ @media (display-mode: standalone) { + html, body { - overscroll-behavior: none; + overscroll-behavior: none !important; + -webkit-overflow-scrolling: touch !important; + } + + /* Garante que sidebar não cause overflow */ + .app-sidebar { + position: fixed !important; + top: 0 !important; + left: 0 !important; + height: 100vh !important; + overflow-y: auto !important; + -webkit-overflow-scrolling: touch !important; } }