From b5b74a674d302311944b1ce3f071c021ef6ee5ae Mon Sep 17 00:00:00 2001
From: rever-tecnologia <revertecnologia@gmail.com>
Date: Fri, 5 Dec 2025 13:44:55 -0300
Subject: [PATCH] Fix emprestimos table column widths consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use colgroup with fixed pixel widths instead of percentages
- Add tableLayout: fixed with minWidth for stable layout
- Add truncate to cells to prevent content overflow
- Show placeholder in Actions column for non-active items
- Column widths now stay consistent across all filter states

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../emprestimos/emprestimos-page-client.tsx   | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/app/emprestimos/emprestimos-page-client.tsx b/src/app/emprestimos/emprestimos-page-client.tsx
index b401088..c02084c 100644
--- a/src/app/emprestimos/emprestimos-page-client.tsx
+++ b/src/app/emprestimos/emprestimos-page-client.tsx
@@ -509,18 +509,29 @@ export function EmprestimosPageClient() {
       {/* Table Section */}
       <section className="rounded-3xl border border-slate-200 bg-white/90 shadow-sm overflow-hidden">
         <div className="overflow-x-auto">
-          <Table className="w-full table-fixed">
+          <Table className="w-full" style={{ tableLayout: "fixed", minWidth: "900px" }}>
+            <colgroup>
+              <col style={{ width: "60px" }} />
+              <col style={{ width: "140px" }} />
+              <col style={{ width: "120px" }} />
+              <col style={{ width: "180px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "90px" }} />
+              <col style={{ width: "100px" }} />
+              <col style={{ width: "120px" }} />
+            </colgroup>
             <TableHeader className="bg-slate-100/80">
               <TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600 hover:bg-transparent">
-                <TableHead className="w-[6%] px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
-                <TableHead className="w-[14%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Cliente</TableHead>
-                <TableHead className="w-[12%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Responsável</TableHead>
-                <TableHead className="w-[16%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Equipamentos</TableHead>
-                <TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Empréstimo</TableHead>
-                <TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Prevista</TableHead>
-                <TableHead className="w-[9%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Status</TableHead>
-                <TableHead className="w-[10%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Valor</TableHead>
-                <TableHead className="w-[11%] border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ações</TableHead>
+                <TableHead className="px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ref</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Cliente</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Responsável</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Equipamentos</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Empréstimo</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Prevista</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Status</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Valor</TableHead>
+                <TableHead className="border-l border-slate-200 px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600">Ações</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -561,10 +572,10 @@ export function EmprestimosPageClient() {
                     className="cursor-pointer transition-colors hover:bg-cyan-50/30"
                     onClick={() => openDetailsDialog(emp)}
                   >
-                    <TableCell className="text-center font-semibold text-neutral-900">#{emp.reference}</TableCell>
-                    <TableCell className="text-center font-medium">{emp.clienteNome}</TableCell>
-                    <TableCell className="text-center">{emp.responsavelNome}</TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="text-center font-semibold text-neutral-900 truncate">#{emp.reference}</TableCell>
+                    <TableCell className="text-center font-medium truncate" title={emp.clienteNome}>{emp.clienteNome}</TableCell>
+                    <TableCell className="text-center truncate" title={emp.responsavelNome}>{emp.responsavelNome}</TableCell>
+                    <TableCell className="text-center truncate">
                       <span className="text-sm text-neutral-600">
                         {emp.quantidade} item(s):{" "}
                         {emp.equipamentos
@@ -574,20 +585,20 @@ export function EmprestimosPageClient() {
                         {emp.equipamentos.length > 2 && "..."}
                       </span>
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="text-center truncate">
                       {format(new Date(emp.dataEmprestimo), "dd/MM/yyyy", { locale: ptBR })}
                     </TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="text-center truncate">
                       {format(new Date(emp.dataFimPrevisto), "dd/MM/yyyy", { locale: ptBR })}
                     </TableCell>
-                    <TableCell className="text-center">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
-                    <TableCell className="text-center">
+                    <TableCell className="text-center truncate">{getStatusText(emp.status, emp.dataFimPrevisto)}</TableCell>
+                    <TableCell className="text-center truncate">
                       {emp.valor
                         ? `R$ ${emp.valor.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}`
                         : "—"}
                     </TableCell>
                     <TableCell className="text-center">
-                      {emp.status === "ATIVO" && (
+                      {emp.status === "ATIVO" ? (
                         <button
                           type="button"
                           onClick={(e) => {
@@ -599,6 +610,8 @@ export function EmprestimosPageClient() {
                           <IconCircleCheck className="size-4" />
                           Devolver
                         </button>
+                      ) : (
+                        <span className="text-neutral-400">—</span>
                       )}
                     </TableCell>
                   </TableRow>