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 ?? '—'}
|
{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',
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user