From ee608cd0420ba6918cf1800299f8df1a9ab01802 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 9 Feb 2026 12:13:51 +0100
Subject: [PATCH] Optimize Grid header UI: reduce font sizes, padding, and
 improve alignment of metric columns

---
 components/DataGrid.tsx    | 53 +++++++++++++++++++++-----------------
 components/ExcelFilter.tsx |  9 ++++---
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/components/DataGrid.tsx b/components/DataGrid.tsx
index a7c2dc3..865938c 100644
--- a/components/DataGrid.tsx
+++ b/components/DataGrid.tsx
@@ -703,8 +703,8 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
     };
 
     const getSortIcon = (key: string) => {
-        if (sortConfig.key !== key) return <span className="text-slate-600 ml-1">⇅</span>;
-        return <span className="text-primary ml-1">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>;
+        if (sortConfig.key !== key) return <span className="text-slate-600 opacity-20 group-hover:opacity-100 transition-opacity ml-0.5">↕</span>;
+        return <span className="text-primary ml-0.5">{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>;
     };
 
     const handleExport = () => {
@@ -1256,11 +1256,11 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                 return (
                                     <th
                                         key={dim}
-                                        className={`px-4 py-3 border-b border-border group bg-slate-950 ${dim === 'title' ? 'min-w-[450px]' : 'min-w-[150px]'}`}
+                                        className={`px-2.5 py-3 border-b border-border group bg-slate-950 ${dim === 'title' ? 'min-w-[400px]' : 'min-w-[140px]'}`}
                                     >
-                                        <div className="flex items-center justify-between">
+                                        <div className="flex items-center justify-between gap-1">
                                             <div
-                                                className="flex items-center cursor-pointer hover:text-white"
+                                                className="flex items-center cursor-pointer hover:text-white text-[11px] font-bold uppercase tracking-wide truncate"
                                                 onClick={() => requestSort(dim)}
                                             >
                                                 {label} {getSortIcon(dim)}
@@ -1268,6 +1268,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                             <ExcelFilter
                                                 columnKey={dim}
                                                 title={label}
+                                                buttonClassName={`p-1 rounded hover:bg-white/10 transition-all ${columnFilters[dim] ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
                                                 uniqueValues={uniqueValues}
                                                 currentFilter={columnFilters[dim]}
                                                 onFilterChange={handleColumnFilterChange}
@@ -1283,38 +1284,42 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                                 return (
                                     <React.Fragment key={year}>
                                         {/* Sell Out & Units */}
-                                        <th className="px-4 py-3 border-b border-border text-right bg-slate-950 min-w-[120px]">
-                                            <div className="flex items-center justify-end gap-2">
-                                                <div
-                                                    className="flex items-center cursor-pointer hover:text-white"
-                                                    onClick={() => requestSort(`total_sellOut_${year}`)}
-                                                >
-                                                    Sell Out {year} {getSortIcon(`total_sellOut_${year}`)}
-                                                </div>
+                                        <th className="px-2 py-2.5 border-b border-border bg-slate-950 min-w-[105px]">
+                                            <div className="flex items-center justify-end gap-1 leading-none">
                                                 <ExcelFilter
                                                     columnKey={`total_sellOut_${year}`}
                                                     title={`Sell Out ${year}`}
+                                                    buttonClassName={`w-4 h-4 flex items-center justify-center rounded hover:bg-white/10 transition-all ${columnFilters[`total_sellOut_${year}`] ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-600'}`}
                                                     uniqueValues={Array.from(new Set(pivotRows.map(r => String(r.totalsByYear[year]?.sellOut || 0)))).sort((a, b) => parseFloat(a as string) - parseFloat(b as string))}
                                                     currentFilter={columnFilters[`total_sellOut_${year}`]}
                                                     onFilterChange={handleColumnFilterChange}
+                                                    icon={<FunnelIcon className="w-2.5 h-2.5" />}
                                                 />
+                                                <div
+                                                    className="flex items-center cursor-pointer hover:text-white text-[10px] font-black uppercase tracking-tight"
+                                                    onClick={() => requestSort(`total_sellOut_${year}`)}
+                                                >
+                                                    {year} SO {getSortIcon(`total_sellOut_${year}`)}
+                                                </div>
                                             </div>
                                         </th>
-                                        <th className="px-4 py-3 border-b border-border text-right bg-slate-950 min-w-[100px]">
-                                            <div className="flex items-center justify-end gap-2">
-                                                <div
-                                                    className="flex items-center cursor-pointer hover:text-white"
-                                                    onClick={() => requestSort(`total_units_${year}`)}
-                                                >
-                                                    Units {year} {getSortIcon(`total_units_${year}`)}
-                                                </div>
+                                        <th className="px-2 py-2.5 border-b border-border bg-slate-950 min-w-[85px]">
+                                            <div className="flex items-center justify-end gap-1 leading-none">
                                                 <ExcelFilter
                                                     columnKey={`total_units_${year}`}
                                                     title={`Units ${year}`}
+                                                    buttonClassName={`w-4 h-4 flex items-center justify-center rounded hover:bg-white/10 transition-all ${columnFilters[`total_units_${year}`] ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-600'}`}
                                                     uniqueValues={Array.from(new Set(pivotRows.map(r => String(r.totalsByYear[year]?.units || 0)))).sort((a, b) => parseFloat(a as string) - parseFloat(b as string))}
                                                     currentFilter={columnFilters[`total_units_${year}`]}
                                                     onFilterChange={handleColumnFilterChange}
+                                                    icon={<FunnelIcon className="w-2.5 h-2.5" />}
                                                 />
+                                                <div
+                                                    className="flex items-center cursor-pointer hover:text-white text-[10px] font-black uppercase tracking-tight"
+                                                    onClick={() => requestSort(`total_units_${year}`)}
+                                                >
+                                                    {year} U {getSortIcon(`total_units_${year}`)}
+                                                </div>
                                             </div>
                                         </th>
 
@@ -1370,7 +1375,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
                         {paginatedRows.map((row) => (
                             <tr key={row.id} className="hover:bg-slate-800/50 transition-colors group relative hover:z-50">
                                 {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-2.5 py-3 font-medium text-slate-200 break-words max-w-xs">
                                         {dim === 'title'
                                             ? <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">
@@ -1435,10 +1440,10 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
 
                                     return (
                                         <React.Fragment key={year}>
-                                            <td className="px-4 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
+                                            <td className="px-2 py-3 text-right font-medium text-white group-hover:text-emerald-400 transition-colors">
                                                 {data ? `€${data.sellOut.toLocaleString('de-DE', { maximumFractionDigits: 0 })}` : '-'}
                                             </td>
-                                            <td className="px-4 py-3 text-right text-slate-400">
+                                            <td className="px-2 py-3 text-right text-slate-400">
                                                 {data ? data.units.toLocaleString('de-DE') : '-'}
                                             </td>
 
diff --git a/components/ExcelFilter.tsx b/components/ExcelFilter.tsx
index 381dd32..9de9785 100644
--- a/components/ExcelFilter.tsx
+++ b/components/ExcelFilter.tsx
@@ -33,7 +33,8 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
     uniqueValues,
     currentFilter,
     onFilterChange,
-    icon
+    icon,
+    buttonClassName
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [operator, setOperator] = useState<typeof OPERATORS[number]['value']>(currentFilter?.textFilter?.operator || '');
@@ -113,16 +114,16 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
     const hasActiveFilter = !!(currentFilter?.textFilter || currentFilter?.selectedValues);
 
     return (
-        <div className="relative inline-block ml-1" ref={containerRef}>
+        <div className="relative inline-block" ref={containerRef}>
             <button
                 onClick={(e) => {
                     e.stopPropagation();
                     setIsOpen(!isOpen);
                 }}
-                className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
+                className={buttonClassName || `flex items-center justify-center p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
                 title={`Filter by ${title}`}
             >
-                {icon || <FunnelIcon className="w-3 h-3" />}
+                {icon || <FunnelIcon className={buttonClassName?.includes('w-') ? '' : "w-3 h-3"} />}
             </button>
 
             {isOpen && (