🔧 v1.39.2 - FIX CRÍTICO: Responsividade iPhone forçada
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
This commit is contained in:
marcoitaloesp-ai
GitHub
parent
2e45f29a06
commit
db82316461
20
CHANGELOG.md
20
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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user