From a856aaae4bffcd66540b7d40fcbf65b32015deed Mon Sep 17 00:00:00 2001
From: "christian.vidal" <christianvidalwolf@gmail.com>
Date: Thu, 29 Jan 2026 20:00:54 +0100
Subject: [PATCH] Optimize Title column width and add tooltip

---
 components/DataGrid.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index bdd77ec..d29a635 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -1005,7 +1005,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                                 return (
                                     <th
                                         key={dim}
-                                        className="px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 min-w-[150px]"
+                                        className={`px-4 py-3 border-b border-border cursor-pointer hover:text-white group bg-slate-950 ${dim === 'title' ? 'min-w-[300px]' : 'min-w-[150px]'}`}
                                         onClick={() => requestSort(dim)}
                                     >
                                         <div className="flex items-center">
@@ -1092,8 +1092,13 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
                                 {effectiveDimensions.map(dim => (
                                     <td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs">
                                         {dim === 'title'
-                                            ? <div className="flex items-start gap-2">
-                                                <span className="line-clamp-2" title={row.title}>{row.title || '-'}</span>
+                                            ? <div className="flex items-start gap-2 max-w-sm relative group/title">
+                                                <span className="line-clamp-2 cursor-help decoration-dotted underline underline-offset-2 decoration-slate-600">
+                                                    {row.title || '-'}
+                                                </span>
+                                                <div className="absolute left-0 top-full mt-2 w-max max-w-md bg-slate-900 border border-slate-700 p-3 rounded-lg shadow-xl text-xs text-white z-[60] opacity-0 group-hover/title:opacity-100 pointer-events-none transition-opacity">
+                                                    {row.title}
+                                                </div>
                                                 {stockMap && (
                                                     <>
                                                         <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />