From 8838db16aedd93253a3517ceb54c36239cbffbf6 Mon Sep 17 00:00:00 2001
From: julian <julian@jcsinformatica.com.br>
Date: Mon, 20 Jul 2026 18:17:23 +0000
Subject: [PATCH] fix(web): tabela larga em grid/flex engolia o card vizinho
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/src/cockpits/rep/ClientDetailPage.tsx | 8 +++++---
 apps/web/src/cockpits/rep/ClientsPage.tsx      | 4 +++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/cockpits/rep/ClientDetailPage.tsx b/apps/web/src/cockpits/rep/ClientDetailPage.tsx
index 2dfef67..60e1de0 100644
--- a/apps/web/src/cockpits/rep/ClientDetailPage.tsx
+++ b/apps/web/src/cockpits/rep/ClientDetailPage.tsx
@@ -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',
diff --git a/apps/web/src/cockpits/rep/ClientsPage.tsx b/apps/web/src/cockpits/rep/ClientsPage.tsx
index 0ac023e..b9061c5 100644
--- a/apps/web/src/cockpits/rep/ClientsPage.tsx
+++ b/apps/web/src/cockpits/rep/ClientsPage.tsx
@@ -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" />