From 4e6563d38dd4ac35ed3b7f0800f5115de5ce4c50 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 10 Apr 2026 10:05:59 +0200
Subject: [PATCH] Move filter icon next to header text in all views

---
 src/components/ArticleDetails.tsx      | 12 ++++++------
 src/components/MatrixView.tsx          |  8 ++++----
 src/components/ProductDescriptions.tsx | 10 +++++-----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/ArticleDetails.tsx b/src/components/ArticleDetails.tsx
index 6319f18..ca02db9 100644
--- a/src/components/ArticleDetails.tsx
+++ b/src/components/ArticleDetails.tsx
@@ -228,24 +228,24 @@ export function ArticleDetails({ data, onEdit, rowStatuses }: ArticleDetailsProp
                     className="px-3 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30"
                     style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }}
                   >
-                    <div className="flex items-center gap-1 overflow-hidden">
-                      <div className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
+                    <div className="flex items-center overflow-hidden">
+                      <span className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
                         {label}
                         {sortCol === col && (
-                          sortDesc ? <ChevronDown className="w-3 h-3 shrink-0" /> : <ChevronUp className="w-3 h-3 shrink-0" />
+                          sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
                         )}
-                      </div>
+                      </span>
                       <button
                         onClick={(e) => {
                           e.stopPropagation();
                           setOpenFilterCol(openFilterCol === col ? null : col);
                         }}
                         className={cn(
-                          "p-1 rounded hover:bg-slate-700 transition-colors shrink-0",
+                          "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
                           (columnFilters[col]?.length || 0) > 0 ? "text-indigo-400 bg-indigo-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100"
                         )}
                       >
-                        <Filter className="w-3.5 h-3.5" />
+                        <Filter className="w-3 h-3" />
                       </button>
                     </div>
 
diff --git a/src/components/MatrixView.tsx b/src/components/MatrixView.tsx
index 3dcc014..d31de37 100644
--- a/src/components/MatrixView.tsx
+++ b/src/components/MatrixView.tsx
@@ -197,8 +197,8 @@ export function MatrixView({ data, headers, rowStatuses }: MatrixViewProps) {
                   key={index} 
                   className="px-4 py-3 font-medium border-b border-slate-700 transition-colors select-none group relative"
                 >
-                  <div className="flex items-center justify-between gap-2">
-                    <div 
+                  <div className="flex items-center overflow-hidden">
+                    <span 
                       className="flex items-center gap-1 cursor-pointer hover:text-white"
                       onClick={() => handleSort(index)}
                     >
@@ -206,14 +206,14 @@ export function MatrixView({ data, headers, rowStatuses }: MatrixViewProps) {
                       {sortCol === index && (
                         sortDesc ? <ChevronDown className="w-3 h-3" /> : <ChevronUp className="w-3 h-3" />
                       )}
-                    </div>
+                    </span>
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
                         setOpenFilterCol(openFilterCol === index ? null : index);
                       }}
                       className={cn(
-                        "p-1 rounded hover:bg-slate-700 transition-colors",
+                        "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
                         (columnFilters[index]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10 opacity-100" : "text-slate-500 opacity-0 group-hover:opacity-100"
                       )}
                     >
diff --git a/src/components/ProductDescriptions.tsx b/src/components/ProductDescriptions.tsx
index 6d5ae29..ed19333 100644
--- a/src/components/ProductDescriptions.tsx
+++ b/src/components/ProductDescriptions.tsx
@@ -301,20 +301,20 @@ export function ProductDescriptions({ data, headers, asinColumnIndex, onEdit, ro
                     className="px-4 py-3 font-medium transition-colors select-none group relative border-r border-slate-700/30"
                     style={{ width: columnWidths[col] || 'auto', minWidth: columnWidths[col] || 'auto' }}
                   >
-                    <div className="flex items-center justify-between gap-1 overflow-hidden">
-                      <div className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
+                    <div className="flex items-center overflow-hidden">
+                      <span className="flex items-center gap-1 cursor-pointer hover:text-white truncate" onClick={() => handleSort(col)}>
                         {label}
                         {sortCol === col && (
-                          sortDesc ? <ChevronDown className="w-4 h-4 shrink-0" /> : <ChevronUp className="w-4 h-4 shrink-0" />
+                          sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
                         )}
-                      </div>
+                      </span>
                       <button
                         onClick={(e) => {
                           e.stopPropagation();
                           setOpenFilterCol(openFilterCol === col ? null : col);
                         }}
                         className={cn(
-                          "p-1 rounded hover:bg-slate-700 transition-colors shrink-0",
+                          "p-0.5 rounded hover:bg-slate-700 transition-colors -my-1",
                           (columnFilters[col]?.length || 0) > 0 ? "text-blue-400 bg-blue-400/10" : "text-slate-500 opacity-0 group-hover:opacity-100"
                         )}
                       >