diff --git a/app/static/estilo.css b/app/static/estilo.css index 8d705ec..d31c6ce 100644 --- a/app/static/estilo.css +++ b/app/static/estilo.css @@ -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; }