From 05f9f0ef107027f17647347f69d9de25d0c7837b Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 24 Apr 2026 13:31:36 +0200
Subject: [PATCH] fix: improve column pinning with proper z-index stacking

- Add getStickyRank() function for layered z-index on pinned columns
- Higher z-index for rightmost pinned columns so they stack correctly
- Apply z-index dynamically based on column order in pinned list
- All pinned columns now stay visible while scrolling
---
 src/components/PricingView.tsx | 38 +++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index 140057c..06e942a 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -1330,7 +1330,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   );
                 })}
 
-                <th style={{ width: columnWidths.unitsOuter, ...(isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0 } : {}) }} className={cn(
+                <th style={{ width: columnWidths.unitsOuter, ...(isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: getStickyRank('unitsOuter') ?? 0 } : {}) }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                     isPinned('unitsOuter') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('unitsOuter')}>
@@ -1361,9 +1361,9 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerW, ...(isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0 } : {}) }} className={cn(
+                <th style={{ width: columnWidths.outerW, ...(isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0, zIndex: getStickyRank('outerW') ?? 0 } : {}) }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
-                    isPinned('outerW') && "sticky bg-slate-900 z-20"
+                    isPinned('outerW') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('outerW')}>
                   <div className="flex items-center gap-1">
                     <span className="truncate flex items-center gap-1">
@@ -1392,9 +1392,9 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerL, ...(isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0 } : {}) }} className={cn(
+                <th style={{ width: columnWidths.outerL, ...(isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0, zIndex: getStickyRank('outerL') ?? 0 } : {}) }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
-                    isPinned('outerL') && "sticky bg-slate-900 z-20"
+                    isPinned('outerL') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('outerL')}>
                   <div className="flex items-center gap-1">
                     <span className="truncate flex items-center gap-1">
@@ -1423,9 +1423,9 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerH, ...(isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0 } : {}) }} className={cn(
+                <th style={{ width: columnWidths.outerH, ...(isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0, zIndex: getStickyRank('outerH') ?? 0 } : {}) }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
-                    isPinned('outerH') && "sticky bg-slate-900 z-20"
+                    isPinned('outerH') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('outerH')}>
                   <div className="flex items-center gap-1">
                     <span className="truncate flex items-center gap-1">
@@ -1581,24 +1581,24 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                     )}
                   >
                     {/* Art. No. */}
-                    <td className={cn("px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap overflow-hidden truncate", isPinned('articleNo') && "sticky bg-slate-800 z-10")} style={isPinned('articleNo') ? { left: getStickyLeft('articleNo') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 font-mono text-xs text-slate-300 whitespace-nowrap overflow-hidden truncate", isPinned('articleNo') && "sticky bg-slate-800")} style={isPinned('articleNo') ? { left: getStickyLeft('articleNo') ?? 0, zIndex: getStickyRank('articleNo') ?? 0 } : {}}>
                       {row[COLUMNS.ARTICLE_NO]}
                     </td>
 
                     {/* Article Name */}
-                    <td className={cn("px-3 py-2.5 text-slate-200 max-w-[200px]", isPinned('articleName') && "sticky bg-slate-800 z-10")} style={isPinned('articleName') ? { left: getStickyLeft('articleName') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 text-slate-200 max-w-[200px]", isPinned('articleName') && "sticky bg-slate-800")} style={isPinned('articleName') ? { left: getStickyLeft('articleName') ?? 0, zIndex: getStickyRank('articleName') ?? 0 } : {}}>
                       <span className="line-clamp-1" title={row[COLUMNS.ARTICLE_NAME]}>
                         {row[COLUMNS.ARTICLE_NAME] || '—'}
                       </span>
                     </td>
 
                     {/* Line */}
-                    <td className={cn("px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs overflow-hidden truncate", isPinned('line') && "sticky bg-slate-800 z-10")} style={isPinned('line') ? { left: getStickyLeft('line') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 text-slate-400 whitespace-nowrap text-xs overflow-hidden truncate", isPinned('line') && "sticky bg-slate-800")} style={isPinned('line') ? { left: getStickyLeft('line') ?? 0, zIndex: getStickyRank('line') ?? 0 } : {}}>
                       {row[COLUMNS.LINE] || '—'}
                     </td>
 
                     {/* Classification */}
-                    <td className={cn("px-3 py-2.5 overflow-hidden", isPinned('classification') && "sticky bg-slate-800 z-10")} style={isPinned('classification') ? { left: getStickyLeft('classification') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 overflow-hidden", isPinned('classification') && "sticky bg-slate-800")} style={isPinned('classification') ? { left: getStickyLeft('classification') ?? 0, zIndex: getStickyRank('classification') ?? 0 } : {}}>
                       <span className={cn(
                         'px-2 py-0.5 rounded text-[10px] font-bold border whitespace-nowrap inline-block max-w-full truncate',
                         String(row[COLUMNS.CLASSIFICATION] || '').toUpperCase().includes('CORE')
@@ -1612,7 +1612,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                     </td>
 
                     {/* TYPE cell */}
-                    <td className={cn("px-3 py-2 overflow-visible relative", isPinned('productType') && "sticky bg-slate-800 z-10")} style={isPinned('productType') ? { left: getStickyLeft('productType') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2 overflow-visible relative", isPinned('productType') && "sticky bg-slate-800")} style={isPinned('productType') ? { left: getStickyLeft('productType') ?? 0, zIndex: getStickyRank('productType') ?? 0 } : {}}>
                       {editingType?.rowIndex === dataIndex ? (
                         <div className="relative">
                           <input
@@ -1658,7 +1658,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                     </td>
 
                     {/* ITEM TO LOGISTIC cell */}
-                    <td className={cn("px-3 py-2 overflow-visible relative", isPinned('itemToLogistic') && "sticky bg-slate-800 z-10")} style={isPinned('itemToLogistic') ? { left: getStickyLeft('itemToLogistic') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2 overflow-visible relative", isPinned('itemToLogistic') && "sticky bg-slate-800")} style={isPinned('itemToLogistic') ? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: getStickyRank('itemToLogistic') ?? 0 } : {}}>
                       {editingLogistic?.rowIndex === dataIndex ? (
                         <input
                           ref={logisticInputRef}
@@ -1697,7 +1697,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       const colKey = `prc_${col.index}`;
 
                       return (
-                        <td key={col.index} className={cn("px-3 py-2 overflow-hidden", isPinned(colKey) && "sticky bg-slate-800 z-10")} style={isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getStickyRank(colKey) ?? 0 } : {}}>
+                        <td key={col.index} className={cn("px-3 py-2 overflow-hidden", isPinned(colKey) && "sticky bg-slate-800")} style={isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getStickyRank(colKey) ?? 0 } : {}}>
                           {isEditing ? (
                             <div className="flex items-center gap-1">
                               <input
@@ -1738,16 +1738,16 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                     })}
 
                     {/* Units columns */}
-                    <td className={cn("px-3 py-2.5", isPinned('unitsOuter') && "sticky bg-slate-800 z-10")} style={isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5", isPinned('unitsOuter') && "sticky bg-slate-800")} style={isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: getStickyRank('unitsOuter') ?? 0 } : {}}>
                       {unitOuterBadge(row[unitsOuterIdx])}
                     </td>
-                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerW') && "sticky bg-slate-800 z-10")} style={isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerW') && "sticky bg-slate-800")} style={isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0, zIndex: getStickyRank('outerW') ?? 0 } : {}}>
                       {row[COLUMNS.OUTER_W] ?? '-'}
                     </td>
-                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerL') && "sticky bg-slate-800 z-10")} style={isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerL') && "sticky bg-slate-800")} style={isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0, zIndex: getStickyRank('outerL') ?? 0 } : {}}>
                       {row[COLUMNS.OUTER_L] ?? '-'}
                     </td>
-                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerH') && "sticky bg-slate-800 z-10")} style={isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0 } : {}}>
+                    <td className={cn("px-3 py-2.5 text-slate-400 font-mono text-xs overflow-hidden truncate", isPinned('outerH') && "sticky bg-slate-800")} style={isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0, zIndex: getStickyRank('outerH') ?? 0 } : {}}>
                       {row[COLUMNS.OUTER_H] ?? '-'}
                     </td>
 
@@ -1755,7 +1755,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                     {containerCols.map(col => {
                       const colKey = `con_${col.index}`;
                       return (
-                        <td key={col.index} className={cn("px-3 py-2.5 overflow-hidden truncate", isPinned(colKey) && "sticky bg-slate-800 z-10")} style={isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getStickyRank(colKey) ?? 0 } : {}}>
+                        <td key={col.index} className={cn("px-3 py-2.5 overflow-hidden truncate", isPinned(colKey) && "sticky bg-slate-800")} style={isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getStickyRank(colKey) ?? 0 } : {}}>
                         {unitBadge(row[col.index], col.name)}
                       </td>
                       );