fix(web): tabela larga em grid/flex engolia o card vizinho

Na ficha do cliente, o card de titulos em aberto se esticava para o lado e
empurrava a secao de NF-e para fora da tela.

Causa: um track `1fr` de CSS Grid carrega `min-width: auto` implicito e se
recusa a encolher abaixo da largura intrinseca do conteudo. Como as tabelas
usam `scroll={{ x: 'max-content' }}`, a largura intrinseca delas e a soma de
todas as colunas — com titulos suficientes, a coluna estourava os 50% e
comia a vizinha. O `maxWidth: '100%'` ja presente nas tabelas nao ajudava,
porque quem crescia era o track, nao a tabela.

`minWidth: 0` nos filhos do grid desarma o `min-width: auto` e devolve o
scroll horizontal para dentro da tabela, que era o comportamento desejado.

Aplicado tambem em ClientsPage: o `<Col>` que hospeda a tabela de clientes
e estruturalmente identico (Col e flex item, mesmo `min-width: auto`) e so
nao quebrava porque a tabela tem `overflow: 'hidden'` no style — uma linha
que se le como puramente cosmetica (arredondar canto) e que, se removida
num refactor, reintroduziria o bug. A protecao vai para o lugar canonico.

Inclui ainda o span responsivo do campo Endereco na ficha.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-20 18:17:23 +00:00
parent a614147fc4
commit 8838db16ae
2 changed files with 8 additions and 4 deletions

View File

@@ -251,7 +251,7 @@ export function ClientDetailPage() {
{client.telefone ?? '—'} {client.telefone ?? '—'}
</Descriptions.Item> </Descriptions.Item>
{client.endereco && ( {client.endereco && (
<Descriptions.Item label="Endereço" span={2}> <Descriptions.Item label="Endereço" span={isMobile ? 1 : 2}>
{client.endereco} {client.endereco}
{client.numEndereco ? `, ${client.numEndereco}` : ''} {client.numEndereco ? `, ${client.numEndereco}` : ''}
{client.bairro ? `${client.bairro}` : ''} {client.bairro ? `${client.bairro}` : ''}
@@ -284,7 +284,9 @@ export function ClientDetailPage() {
}} }}
> >
{/* ── Contas a Receber ── */} {/* ── Contas a Receber ── */}
<div> {/* minWidth: 0 — track 1fr tem min-width auto; sem isto a tabela com
scroll x 'max-content' estoura a coluna e engole a vizinha (NF-e). */}
<div style={{ minWidth: 0 }}>
<div <div
style={{ style={{
display: 'flex', display: 'flex',
@@ -390,7 +392,7 @@ export function ClientDetailPage() {
</div> </div>
{/* ── Notas Fiscais ── */} {/* ── Notas Fiscais ── */}
<div> <div style={{ minWidth: 0 }}>
<div <div
style={{ style={{
display: 'flex', display: 'flex',

View File

@@ -1473,7 +1473,9 @@ export function ClientsPage() {
{/* ── Área principal ────────────────────────────────────────────── */} {/* ── Área principal ────────────────────────────────────────────── */}
<Row gutter={[20, 20]}> <Row gutter={[20, 20]}>
<Col xs={24} lg={17}> {/* minWidth: 0 — Col é flex item (min-width auto). Sem isto a tabela com
scroll x estoura a coluna e engole o card vizinho. */}
<Col xs={24} lg={17} style={{ minWidth: 0 }}>
{isLoading ? ( {isLoading ? (
<div style={{ textAlign: 'center', padding: 64 }}> <div style={{ textAlign: 'center', padding: 64 }}>
<Spin size="large" /> <Spin size="large" />