estilo de tabelas

frontend/src/components/AvaliacaoTab.jsx

@@ -4,6 +4,7 @@ import { buildCsvBlob } from '../csv'
 import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
 import SinglePillAutocomplete from './SinglePillAutocomplete'
+import TruncatedCellContent from './TruncatedCellContent'
 
 function normalizarChaveModelo(value) {
   return String(value || '')
@@ -61,6 +62,16 @@ function formatarValorTabelaKnn(coluna, valor) {
   return String(valor)
 }
 
+function estimarLarguraColunaKnn(coluna, rows = []) {
+  const larguraBase = String(coluna || '').trim().length
+  const maiorConteudo = (rows || []).reduce((maximo, row) => {
+    const texto = String(formatarValorTabelaKnn(coluna, row?.[coluna]) || '').trim()
+    return Math.max(maximo, texto.length)
+  }, larguraBase)
+  const larguraSugerida = Math.ceil(maiorConteudo / 3) + 2
+  return Math.max(12, Math.min(34, larguraSugerida))
+}
+
 function temCoordenadasAvaliandoKnn(itens) {
   if (!Array.isArray(itens) || !itens.length) return false
   const variaveis = new Set(
@@ -545,6 +556,15 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null }) {
     return avaliacoesCards.find((item) => item.id === baseCardId) || null
   }, [avaliacoesCards, baseCardId])
 
+  const knnDetalheColunasLargura = useMemo(() => {
+    const columns = Array.isArray(knnDetalheTabela?.columns) ? knnDetalheTabela.columns : []
+    const rows = Array.isArray(knnDetalheTabela?.rows) ? knnDetalheTabela.rows : []
+    return columns.reduce((acc, coluna) => {
+      acc[coluna] = estimarLarguraColunaKnn(coluna, rows)
+      return acc
+    }, {})
+  }, [knnDetalheTabela])
+
   function resolverModeloIdRepositorio(chaveBruta, modelosOverride = null) {
     const chave = String(chaveBruta || '').trim()
     if (!chave) return ''
@@ -1842,7 +1862,15 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null }) {
                           <thead>
                             <tr>
                               {knnDetalheTabela.columns.map((coluna) => (
-                                <th key={`th-knn-${coluna}`}>{String(coluna)}</th>
+                                <th
+                                  key={`th-knn-${coluna}`}
+                                  style={{
+                                    minWidth: `${knnDetalheColunasLargura[coluna] || 12}ch`,
+                                    width: `${knnDetalheColunasLargura[coluna] || 12}ch`,
+                                  }}
+                                >
+                                  {String(coluna)}
+                                </th>
                               ))}
                             </tr>
                           </thead>
@@ -1850,8 +1878,19 @@ export default function AvaliacaoTab({ sessionId, quickLoadRequest = null }) {
                             {(knnDetalheTabela.rows || []).map((linha, idxLinha) => (
                               <tr key={`tr-knn-${idxLinha}`}>
                                 {knnDetalheTabela.columns.map((coluna) => (
-                                  <td key={`td-knn-${idxLinha}-${coluna}`}>
-                                    {formatarValorTabelaKnn(coluna, linha?.[coluna])}
+                                  <td
+                                    key={`td-knn-${idxLinha}-${coluna}`}
+                                    style={{
+                                      minWidth: `${knnDetalheColunasLargura[coluna] || 12}ch`,
+                                      width: `${knnDetalheColunasLargura[coluna] || 12}ch`,
+                                    }}
+                                  >
+                                    <TruncatedCellContent
+                                      className="avaliacao-knn-table-cell"
+                                      tooltipContent={String(formatarValorTabelaKnn(coluna, linha?.[coluna]))}
+                                    >
+                                      {formatarValorTabelaKnn(coluna, linha?.[coluna])}
+                                    </TruncatedCellContent>
                                   </td>
                                 ))}
                               </tr>

frontend/src/components/DataTable.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
+import TruncatedCellContent from './TruncatedCellContent'
 
 const LIMIAR_RENDERIZACAO_VIRTUAL = 1500
-const ESTIMATIVA_ALTURA_LINHA_PX = 33
+const ESTIMATIVA_ALTURA_LINHA_PX = 68
 const OVERSCAN_LINHAS = 40
 const MIN_JANELA_LINHAS = 220
 const SORT_COLLATOR = new Intl.Collator('pt-BR', { numeric: true, sensitivity: 'base' })
@@ -205,7 +206,11 @@ function DataTable({
             return (
               <tr key={absoluteIndex} className={rowClassName}>
                 {columns.map((col) => (
-                  <td key={`${absoluteIndex}-${col}`}>{String(row[col] ?? '')}</td>
+                  <td key={`${absoluteIndex}-${col}`}>
+                    <TruncatedCellContent tooltipContent={String(row[col] ?? '')}>
+                      {String(row[col] ?? '')}
+                    </TruncatedCellContent>
+                  </td>
                 ))}
               </tr>
             )

frontend/src/components/ElaboracaoTab.jsx

@@ -9,6 +9,7 @@ import MapFrame from './MapFrame'
 import PlotFigure from './PlotFigure'
 import SectionBlock from './SectionBlock'
 import SinglePillAutocomplete from './SinglePillAutocomplete'
+import TruncatedCellContent from './TruncatedCellContent'
 
 const OPERADORES = ['<=', '>=', '<', '>', '=']
 const GRAUS_COEF = [
@@ -6132,7 +6133,12 @@ export default function ElaboracaoTab({ sessionId, authUser }) {
                               <tr key={`tr-knn-elab-${idxLinha}`}>
                                 {knnDetalheTabela.columns.map((coluna) => (
                                   <td key={`td-knn-elab-${idxLinha}-${coluna}`}>
-                                    {formatarValorTabelaKnn(coluna, linha?.[coluna])}
+                                    <TruncatedCellContent
+                                      className="avaliacao-knn-table-cell"
+                                      tooltipContent={String(formatarValorTabelaKnn(coluna, linha?.[coluna]))}
+                                    >
+                                      {formatarValorTabelaKnn(coluna, linha?.[coluna])}
+                                    </TruncatedCellContent>
                                   </td>
                                 ))}
                               </tr>

frontend/src/components/RepositorioTab.jsx

@@ -7,6 +7,7 @@ import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
 import ModeloTrabalhosTecnicosPanel from './ModeloTrabalhosTecnicosPanel'
 import PlotFigure from './PlotFigure'
+import TruncatedCellContent from './TruncatedCellContent'
 import { getFaixaDataRecencyInfo } from '../modelRecency'
 
 const PAGE_SIZE = 50
@@ -498,10 +499,10 @@ export default function RepositorioTab({ authUser, sessionId, openModeloRequest
                 const periodoRecency = getFaixaDataRecencyInfo(item.periodo_dados)
                 return (
                   <tr key={key}>
-                    <td>{item.nome_modelo || item.arquivo || key}</td>
-                    <td>{item.tipo_imovel || '-'}</td>
-                    <td>{item.finalidade || '-'}</td>
-                    <td>{item.autor || '-'}</td>
+                    <td><TruncatedCellContent tooltipContent={item.nome_modelo || item.arquivo || key}>{item.nome_modelo || item.arquivo || key}</TruncatedCellContent></td>
+                    <td><TruncatedCellContent tooltipContent={item.tipo_imovel || '-'}>{item.tipo_imovel || '-'}</TruncatedCellContent></td>
+                    <td><TruncatedCellContent tooltipContent={item.finalidade || '-'}>{item.finalidade || '-'}</TruncatedCellContent></td>
+                    <td><TruncatedCellContent tooltipContent={item.autor || '-'}>{item.autor || '-'}</TruncatedCellContent></td>
                     <td>
                       <span className="repo-periodo-wrap">
                         <span>{item.periodo_dados?.label || '-'}</span>
@@ -512,8 +513,8 @@ export default function RepositorioTab({ authUser, sessionId, openModeloRequest
                         ) : null}
                       </span>
                     </td>
-                    <td>{item.total_dados ?? '-'}</td>
-                    <td>{item.total_trabalhos ?? '-'}</td>
+                    <td><TruncatedCellContent tooltipContent={String(item.total_dados ?? '-')}>{item.total_dados ?? '-'}</TruncatedCellContent></td>
+                    <td><TruncatedCellContent tooltipContent={String(item.total_trabalhos ?? '-')}>{item.total_trabalhos ?? '-'}</TruncatedCellContent></td>
                     <td className="repo-col-open">
                       <button
                         type="button"

frontend/src/components/TrabalhosTecnicosTab.jsx

@@ -3,6 +3,7 @@ import { api } from '../api'
 import ListPagination from './ListPagination'
 import LoadingOverlay from './LoadingOverlay'
 import MapFrame from './MapFrame'
+import TruncatedCellContent from './TruncatedCellContent'
 
 const PAGE_SIZE = 50
 const TIPO_OPTIONS = ['LA', 'PT', 'IT', 'PTF', 'PIV']
@@ -1060,10 +1061,10 @@ export default function TrabalhosTecnicosTab({
                 <tbody>
                   {trabalhosPagina.map((item) => (
                     <tr key={String(item?.id || '')}>
-                      <td className="trabalhos-col-nome">{item?.nome || '-'}</td>
-                      <td className="trabalhos-col-tipo">{item?.tipo_label || item?.tipo_codigo || '-'}</td>
-                      <td className="trabalhos-col-ano">{item?.ano || '-'}</td>
-                      <td className="trabalhos-col-endereco">{item?.endereco_resumo || '-'}</td>
+                      <td className="trabalhos-col-nome"><TruncatedCellContent tooltipContent={item?.nome || '-'}>{item?.nome || '-'}</TruncatedCellContent></td>
+                      <td className="trabalhos-col-tipo"><TruncatedCellContent tooltipContent={item?.tipo_label || item?.tipo_codigo || '-'}>{item?.tipo_label || item?.tipo_codigo || '-'}</TruncatedCellContent></td>
+                      <td className="trabalhos-col-ano"><TruncatedCellContent tooltipContent={item?.ano || '-'}>{item?.ano || '-'}</TruncatedCellContent></td>
+                      <td className="trabalhos-col-endereco"><TruncatedCellContent tooltipContent={item?.endereco_resumo || '-'}>{item?.endereco_resumo || '-'}</TruncatedCellContent></td>
                       <td className="trabalhos-col-modelos">
                         {Array.isArray(item?.modelos) && item.modelos.length ? (
                           <div className="trabalho-model-stack">
@@ -1088,7 +1089,7 @@ export default function TrabalhosTecnicosTab({
                             ))}
                           </div>
                         ) : (
-                          item?.modelo_resumo || '-'
+                          <TruncatedCellContent tooltipContent={item?.modelo_resumo || '-'}>{item?.modelo_resumo || '-'}</TruncatedCellContent>
                         )}
                       </td>
                       <td className="trabalhos-col-processos">

frontend/src/components/TruncatedCellContent.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+function isContentTruncated(element) {
+  if (!element) return false
+  return (element.scrollHeight - element.clientHeight) > 1 || (element.scrollWidth - element.clientWidth) > 1
+}
+
+export default function TruncatedCellContent({
+  children,
+  tooltipContent = '',
+  className = 'table-cell-clamp',
+}) {
+  const contentRef = React.useRef(null)
+  const tooltipText = String(tooltipContent ?? '').trim()
+
+  const syncTooltip = React.useCallback(() => {
+    const element = contentRef.current
+    if (!element) return
+    if (!tooltipText || !isContentTruncated(element)) {
+      element.removeAttribute('title')
+      return
+    }
+    element.setAttribute('title', tooltipText)
+  }, [tooltipText])
+
+  const clearTooltip = React.useCallback(() => {
+    const element = contentRef.current
+    if (!element) return
+    element.removeAttribute('title')
+  }, [])
+
+  React.useEffect(() => {
+    const element = contentRef.current
+    if (!element) return undefined
+    element.removeAttribute('title')
+    return () => {
+      element.removeAttribute('title')
+    }
+  }, [tooltipText, children])
+
+  return (
+    <div
+      ref={contentRef}
+      className={className}
+      onMouseEnter={syncTooltip}
+      onFocus={syncTooltip}
+      onMouseLeave={clearTooltip}
+      onBlur={clearTooltip}
+    >
+      {children}
+    </div>
+  )
+}

frontend/src/components/VisaoGeralTab.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { api } from '../api'
 import ListPagination from './ListPagination'
+import TruncatedCellContent from './TruncatedCellContent'
 
 const PAGE_SIZE = 50
 const SORT_COLLATOR = new Intl.Collator('pt-BR', { numeric: true, sensitivity: 'base' })
@@ -478,10 +479,12 @@ export default function VisaoGeralTab() {
             <tbody>
               {familiasPagina.map((item) => (
                 <tr key={item.familia_modelos}>
-                  <td>{item.familia_modelos || '-'}</td>
-                  <td>{item.tipo_imovel || '-'}</td>
-                  <td>{item.finalidade || '-'}</td>
-                  <td className="repo-visao-geral-number-cell">{formatCount(item.total_avaliandos)}</td>
+                  <td><TruncatedCellContent tooltipContent={item.familia_modelos || '-'}>{item.familia_modelos || '-'}</TruncatedCellContent></td>
+                  <td><TruncatedCellContent tooltipContent={item.tipo_imovel || '-'}>{item.tipo_imovel || '-'}</TruncatedCellContent></td>
+                  <td><TruncatedCellContent tooltipContent={item.finalidade || '-'}>{item.finalidade || '-'}</TruncatedCellContent></td>
+                  <td className="repo-visao-geral-number-cell">
+                    <TruncatedCellContent tooltipContent={formatCount(item.total_avaliandos)}>{formatCount(item.total_avaliandos)}</TruncatedCellContent>
+                  </td>
                 </tr>
               ))}
               {!familiasFiltradasOrdenadas.length ? (

frontend/src/styles.css

@@ -4108,6 +4108,21 @@ button.pesquisa-coluna-remove:hover {
   max-height: min(44vh, 420px);
 }
 
+.avaliacao-knn-table-wrapper table {
+  width: max-content;
+  min-width: 100%;
+  table-layout: fixed;
+}
+
+.avaliacao-knn-table-wrapper th,
+.avaliacao-knn-table-wrapper td {
+  vertical-align: top;
+}
+
+.avaliacao-knn-table-cell {
+  width: 100%;
+}
+
 @media (max-width: 900px) {
   .avaliacao-knn-map-wrap .map-frame {
     min-height: 340px;
@@ -4802,8 +4817,8 @@ button.btn-upload-select {
 
 .table-wrapper table {
   border-collapse: collapse;
-  min-width: 680px;
-  width: 100%;
+  min-width: max(680px, 100%);
+  width: max-content;
 }
 
 .table-wrapper th,
@@ -4812,6 +4827,7 @@ button.btn-upload-select {
   border-bottom: 1px solid #edf2f6;
   text-align: left;
   font-size: 0.88rem;
+  vertical-align: top;
 }
 
 .table-wrapper th {
@@ -4886,6 +4902,24 @@ button.btn-upload-select {
   background: #ffe882;
 }
 
+.table-cell-clamp,
+.avaliacao-knn-table-cell {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.34;
+  max-height: calc(1.34em * 3);
+  max-width: 24ch;
+}
+
+.avaliacao-knn-table-cell {
+  max-width: none;
+}
+
 .table-hint {
   border-top: 1px solid #edf2f6;
   padding: 7px 9px;