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:
@@ -251,7 +251,7 @@ export function ClientDetailPage() {
|
||||
{client.telefone ?? '—'}
|
||||
</Descriptions.Item>
|
||||
{client.endereco && (
|
||||
<Descriptions.Item label="Endereço" span={2}>
|
||||
<Descriptions.Item label="Endereço" span={isMobile ? 1 : 2}>
|
||||
{client.endereco}
|
||||
{client.numEndereco ? `, ${client.numEndereco}` : ''}
|
||||
{client.bairro ? ` — ${client.bairro}` : ''}
|
||||
@@ -284,7 +284,9 @@ export function ClientDetailPage() {
|
||||
}}
|
||||
>
|
||||
{/* ── 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
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -390,7 +392,7 @@ export function ClientDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* ── Notas Fiscais ── */}
|
||||
<div>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
|
||||
@@ -1473,7 +1473,9 @@ export function ClientsPage() {
|
||||
|
||||
{/* ── Área principal ────────────────────────────────────────────── */}
|
||||
<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 ? (
|
||||
<div style={{ textAlign: 'center', padding: 64 }}>
|
||||
<Spin size="large" />
|
||||
|
||||
Reference in New Issue
Block a user