christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 18:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimize Title column width and add tooltip

Browse Source
This commit is contained in:
christian.vidal
2026-01-29 20:00:54 +01:00
parent 5dce7992e1
commit a856aaae4b
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/DataGrid.tsx
+8 -3
View File
@@ -1005,7 +1005,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
return ( return (
<th <th
key={dim} 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)} onClick={() => requestSort(dim)}
> >
<div className="flex items-center"> <div className="flex items-center">
@@ -1092,8 +1092,13 @@ const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter, adsData, s
{effectiveDimensions.map(dim => ( {effectiveDimensions.map(dim => (
<td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs"> <td key={dim} className="px-4 py-3 font-medium text-slate-200 break-words max-w-xs">
{dim === 'title' {dim === 'title'
? <div className="flex items-start gap-2"> ? <div className="flex items-start gap-2 max-w-sm relative group/title">
<span className="line-clamp-2" title={row.title}>{row.title || '-'}</span> <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 && ( {stockMap && (
<> <>
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} /> <StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />