From 6a864a4c35beda4c3d192ac6cba78e59ab991fc8 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 21 Apr 2026 08:56:37 +0200
Subject: [PATCH] Fix column resize - make handle more visible and add
 pointer-events

---
 src/components/PricingView.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index b389901..492ab5e 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -122,6 +122,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
   };
 
   const handleResizeStart = (e: React.MouseEvent, colKey: string, currentWidth: number) => {
+    console.log('Resize started for:', colKey, 'at x:', e.clientX);
     e.preventDefault();
     e.stopPropagation();
     setResizingColumn(colKey);
@@ -661,9 +662,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
           <table ref={tableRef} className="w-full text-sm border-collapse">
             <thead className="sticky top-0 z-10 bg-slate-900">
               <tr>
-                <th data-col-key="articleNo" style={{ width: columnWidths.articleNo || 100 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
-                  Art. No.
-                  <div onMouseDown={(e) => handleResizeStart(e, 'articleNo', columnWidths.articleNo || 100)} className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-blue-500/30" />
+                <th data-col-key="articleNo" style={{ width: columnWidths.articleNo || 100, minWidth: 60 }} className="text-left px-2 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 whitespace-nowrap relative">
+                  <div className="flex items-center justify-between">
+                    <span>Art. No.</span>
+                    <div 
+                      onMouseDown={(e) => handleResizeStart(e, 'articleNo', columnWidths.articleNo || 100)} 
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-1.5 h-4 bg-slate-600 hover:bg-blue-500 cursor-col-resize rounded-sm ml-1 shrink-0 pointer-events-auto" 
+                      title="Drag to resize"
+                    />
+                  </div>
                 </th>
                 <th data-col-key="articleName" style={{ width: columnWidths.articleName || 220 }} className="text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider border-b border-slate-700 group relative">
                   <div className="flex items-center gap-1"><span>Article Name</span>