From 67116d13c44b145c6197be65a418ffb9ed12d901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Faleiros?= <cauefaleiros@gmail.com>
Date: Mon, 6 Jul 2026 13:23:07 -0300
Subject: [PATCH] Polish product stock table layout

---
 src/pages/Products.tsx | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx
index 5d43ddc..ef9d482 100644
--- a/src/pages/Products.tsx
+++ b/src/pages/Products.tsx
@@ -24,8 +24,8 @@ type ProductRow = ProductAnalyticsItem & {
 const riskStyles: Record<StockRisk, { label: string; className: string; dotClass: string }> = {
   rupture: {
     label: 'Sem estoque',
-    className: 'border-fuchsia-400/35 bg-fuchsia-400/10 text-fuchsia-300',
-    dotClass: 'bg-fuchsia-400'
+    className: 'border-zinc-500/30 bg-zinc-500/10 text-zinc-300',
+    dotClass: 'bg-zinc-400'
   },
   critical: {
     label: 'Até 7 dias',
@@ -575,7 +575,18 @@ const Products = () => {
       ) : (
         <div className={`bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm ${isRefreshing ? 'refreshing-content' : ''}`} aria-busy={isRefreshing}>
           <div className="overflow-x-auto">
-            <table className="w-full text-left text-sm">
+            <table className="w-full min-w-[1320px] table-fixed text-left text-sm">
+              <colgroup>
+                <col className="w-[120px]" />
+                <col className="w-[390px]" />
+                <col className="w-[170px]" />
+                <col className="w-[130px]" />
+                <col className="w-[120px]" />
+                <col className="w-[130px]" />
+                <col className="w-[130px]" />
+                <col className="w-[140px]" />
+                <col className="w-[110px]" />
+              </colgroup>
               <thead className="bg-zinc-50 dark:bg-dark-header border-b border-zinc-100 dark:border-dark-border text-zinc-500 dark:text-dark-muted">
                 <tr>
                   <th className="px-6 py-4 font-bold uppercase tracking-wider text-[10px]">ID Produto</th>
@@ -596,31 +607,31 @@ const Products = () => {
                   return (
                     <tr key={product.id} className="hover:bg-zinc-50/80 dark:hover:bg-dark-input/50 transition-colors group">
                       <td className="px-6 py-2.5 font-mono text-[11px] text-zinc-400 dark:text-dark-muted">#{product.id}</td>
-                      <td className="px-6 py-2.5">
-                        <div className="font-semibold text-zinc-900 dark:text-dark-text">{product.name}</div>
+                      <td className="max-w-0 px-6 py-2.5">
+                        <div className="truncate font-semibold text-zinc-900 dark:text-dark-text" title={product.name}>{product.name}</div>
                         <div className="text-[10px] text-zinc-400 dark:text-dark-muted font-medium">Preço Atual: {formatCurrency(product.lastPrice)}</div>
                       </td>
                       <td className="px-6 py-2.5">
-                        <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
+                        <span className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-bold ${style.className}`}>
                           <span className={`h-2 w-2 rounded-full ${style.dotClass}`} />
                           {style.label}
                         </span>
                       </td>
-                      <td className="px-6 py-2.5">
+                      <td className="px-6 py-2.5 whitespace-nowrap">
                         <div className="flex items-center gap-2">
                           <Package className="w-3.5 h-3.5 text-zinc-400 dark:text-dark-muted" />
                           <span className="font-bold text-zinc-900 dark:text-dark-text">{formatNumber(product.quantitySold)} un.</span>
                         </div>
                       </td>
-                      <td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text">{formatNumber(product.stock)} un.</td>
-                      <td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted">{formatNumber(product.dailySales, 2)} un./dia</td>
-                      <td className="px-6 py-2.5">
+                      <td className="px-6 py-2.5 font-bold text-zinc-900 dark:text-dark-text whitespace-nowrap">{formatNumber(product.stock)} un.</td>
+                      <td className="px-6 py-2.5 text-zinc-500 dark:text-dark-muted whitespace-nowrap">{formatNumber(product.dailySales, 2)} un./dia</td>
+                      <td className="px-6 py-2.5 whitespace-nowrap">
                         <span className="inline-flex items-center gap-1.5 font-bold text-zinc-900 dark:text-dark-text">
                           <TrendingDown className="h-3.5 w-3.5 text-zinc-400 dark:text-dark-muted" />
                           {formatDays(product.daysOfCover)}
                         </span>
                       </td>
-                      <td className="px-6 py-2.5 text-brand-primary font-bold">{formatCurrency(product.revenue)}</td>
+                      <td className="px-6 py-2.5 text-brand-primary font-bold whitespace-nowrap">{formatCurrency(product.revenue)}</td>
                       <td className="px-6 py-2.5 text-right">
                         <Link
                           to={`/products/${product.id}`}