gustavosantos/GTI_GERENCIADOR_FISCAL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tabelas nao ficam mais espremidas no mobile (colunas quebrando letra por letra) - min-width em vez de width fixo, permitindo rolagem horizontal

Browse Source
This commit is contained in:
Gustavo
2026-08-20 14:13:25 -03:00
parent ab8912fce7
commit 2e23904b99
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/estilo.css
+20 -3
View File
@@ -191,7 +191,14 @@ a { color: var(--cor-acento-texto); }
}
.tabela-wrap { overflow-x: auto; border: 1px solid var(--cor-borda); border-radius: 12px; background: var(--cor-superficie); box-shadow: var(--sombra-card); }
table { width: 100%; border-collapse: collapse; }
/*
* min-width (não width) faz a tabela continuar esticando pra preencher o
* cartão em telas largas (comportamento de sempre), mas permite crescer
* além disso quando o conteúdo não cabe — em telas estreitas (celular) o
* .tabela-wrap acima assume a rolagem horizontal, em vez do texto quebrar
* letra por letra pra caber à força numa coluna espremida.
*/
table { min-width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cor-borda); }
th { white-space: nowrap; }
td { overflow-wrap: anywhere; }
@@ -271,7 +278,17 @@ a.botao:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
.botao-toggle-log:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
.secao-log-conteudo { padding-top: 4px; }
.table-clientes { table-layout: fixed; }
/*
* table-layout:fixed + min-width faz as colunas respeitarem exatamente as
* larguras abaixo (necessário pro Abrir/Gerar chave não quebrar linha —
* ver commit da tarefa de UI da tabela). Em telas estreitas (celular), o
* min-width impede a tabela de ser espremida a ponto de zerar a largura
* das colunas percentuais — o .tabela-wrap (overflow-x: auto) assume a
* rolagem horizontal nesse caso, em vez do texto quebrar letra por letra.
* Nas telas largas (desktop) o min-width nunca entra em jogo, então o
* visual de lá continua idêntico.
*/
.table-clientes { table-layout: fixed; min-width: 990px; }
.table-clientes th.col-codigo, .table-clientes td.col-codigo,
.table-clientes th.col-cnpj, .table-clientes td.col-cnpj,
@@ -286,7 +303,7 @@ a.botao:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
.table-clientes td.col-cnpj { white-space: nowrap; }
.table-clientes col.col-codigo { width: 90px; }
.table-clientes col.col-razao, .table-clientes col.col-fantasia { width: 27%; }
.table-clientes col.col-razao, .table-clientes col.col-fantasia { width: 220px; }
.table-clientes col.col-cnpj { width: 160px; }
.table-clientes col.col-status { width: 70px; }
.table-clientes col.col-acoes { width: 230px; }