From e96d245f59f8c8ba8e7f4094dbf64e37c564a046 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Fri, 24 Apr 2026 17:08:23 +0200
Subject: [PATCH] fix: ensure filter dropdowns are not covered by pinned
 columns

---
 src/components/ColumnFilterPopover.tsx | 432 +++++++++++++------------
 src/components/PricingView.tsx         |  95 ++++--
 2 files changed, 309 insertions(+), 218 deletions(-)

diff --git a/src/components/ColumnFilterPopover.tsx b/src/components/ColumnFilterPopover.tsx
index 03ed1b4..5e6de0a 100644
--- a/src/components/ColumnFilterPopover.tsx
+++ b/src/components/ColumnFilterPopover.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Search, Check, X, Filter } from 'lucide-react';
 import { cn } from '../lib/utils';
 
@@ -37,6 +38,36 @@ export function ColumnFilterPopover({
   const [activeTab, setActiveTab] = useState<'values' | 'condition'>('values');
   const [condition, setCondition] = useState<FilterCondition>({ type: 'equals', value: '' });
   const [conditionResult, setConditionResult] = useState<string[]>([]);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    const container = document.createElement('div');
+    container.id = 'filter-portal-' + Math.random().toString(36).substr(2, 9);
+    container.style.position = 'fixed';
+    container.style.zIndex = '9999';
+    container.style.top = '0';
+    container.style.left = '0';
+    container.style.pointerEvents = 'none';
+    document.body.appendChild(container);
+    setPortalContainer(container);
+
+    const btns = document.querySelectorAll('.filter-trigger-btn');
+    btns.forEach(btn => {
+      if (btn instanceof HTMLElement) {
+        const rect = btn.getBoundingClientRect();
+        const currentLeft = rect.left;
+        const currentTop = rect.bottom + 4;
+        setPosition({ top: currentTop, left: currentLeft });
+      }
+    });
+
+    return () => {
+      if (document.body.contains(container)) {
+        document.body.removeChild(container);
+      }
+    };
+  }, []);
 
   const isDraggingRef = React.useRef(false);
   const dragStartRef = React.useRef<number | null>(null);
@@ -157,224 +188,229 @@ export function ColumnFilterPopover({
   }, []);
 
   return (
-    <div
-      className={cn(
-        "absolute top-full left-0 mt-1 w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100",
-        className
-      )}
-      style={{ zIndex: zIndex >= 200 ? 9999 : zIndex }}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <button
-        onClick={onClose}
-        className="absolute top-2 right-2 text-slate-500 hover:text-white p-1 rounded transition-colors z-10"
-      >
-        <X className="w-4 h-4" />
-      </button>
-
-      {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
-
-      <div className="flex gap-1 border-b border-slate-700 pb-2">
-        <button
-          onClick={() => setActiveTab('values')}
+    <div className="fixed inset-0 z-0 pointer-events-none">
+      {portalContainer && createPortal(
+        <div
           className={cn(
-            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
-            activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+            "absolute w-72 bg-slate-800 border border-slate-700 rounded-lg shadow-2xl p-3 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100 pointer-events-auto",
+            className
           )}
+          style={{ zIndex: 9999 }}
+          onClick={(e) => e.stopPropagation()}
         >
-          Values ({selectedValues.length})
-        </button>
-        <button
-          onClick={() => setActiveTab('condition')}
-          className={cn(
-            "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
-            activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
-          )}
-        >
-          <Filter className="w-3 h-3" />
-          Condition
-        </button>
-      </div>
-
-      {activeTab === 'values' ? (
-        <>
-          <div className="relative">
-            <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
-            <input
-              type="text"
-              placeholder="Filter values..."
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && search) {
-                  e.preventDefault();
-                  onSelectAll(filteredValues);
-                  onClose();
-                }
-              }}
-              className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
-              autoFocus
-            />
-            {search && (
-              <button
-                onClick={() => setSearch('')}
-                className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
-              >
-                <X className="w-3 h-3" />
-              </button>
-            )}
-          </div>
-
-          <div 
-            ref={listRef}
-            className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
+          <button
+            onClick={onClose}
+            className="absolute top-2 right-2 text-slate-500 hover:text-white p-1 rounded transition-colors z-10"
           >
-            {filteredValues.map((val, idx) => {
-              const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
-                ((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
-              return (
-                <div
-                  key={val}
-                  role="checkbox"
-                  aria-checked={selectedValues.includes(val)}
-                  tabIndex={0}
-                  onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
-                  onMouseEnter={() => handleMouseEnter(idx)}
-                  onClick={(e) => {
-                    if (didDragRef.current) return;
-                    if (e.shiftKey && lastClickedIndex !== null) {
-                      const start = Math.min(lastClickedIndex, idx);
-                      const end = Math.max(lastClickedIndex, idx);
-                      const itemsToSelect = filteredValues.slice(start, end + 1);
-                      const newSelected = new Set([...selectedValues, ...itemsToSelect]);
-                      onSelectAll(Array.from(newSelected));
-                    } else {
-                      onToggle(val);
-                    }
-                    setLastClickedIndex(idx);
-                  }}
-                  onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
-                  className={cn(
-                    "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
-                    isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
-                  )}
-                >
-                  <div className={cn(
-                    "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
-                    selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
-                  )}>
-                    {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
-                  </div>
-                  <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
-                </div>
-              );
-            })}
-            {filteredValues.length === 0 && (
-              <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
-            )}
-          </div>
+            <X className="w-4 h-4" />
+          </button>
 
-          <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
-            <div className="flex items-center gap-3">
-              <button
-                onClick={() => {
-                  if (isAllSelected) {
-                    onSelectAll([]);
-                  } else {
-                    onSelectAll(uniqueValues);
-                  }
-                }}
-                className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
-              >
-                {isAllSelected ? 'Deselect All' : 'Select All'}
-              </button>
-              <span className="text-slate-600 font-bold">•</span>
-              <button
-                onClick={onClear}
-                className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
-              >
-                Clear
-              </button>
-            </div>
+          {title && <div className="text-[10px] font-bold text-slate-500 uppercase tracking-wider px-1">{title}</div>}
+
+          <div className="flex gap-1 border-b border-slate-700 pb-2">
             <button
-              onClick={onClose}
-              className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
+              onClick={() => setActiveTab('values')}
+              className={cn(
+                "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors",
+                activeTab === 'values' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+              )}
             >
-              OK
+              Values ({selectedValues.length})
+            </button>
+            <button
+              onClick={() => setActiveTab('condition')}
+              className={cn(
+                "flex-1 px-2 py-1 text-[10px] font-bold rounded transition-colors flex items-center justify-center gap-1",
+                activeTab === 'condition' ? "bg-blue-600 text-white" : "text-slate-400 hover:text-white"
+              )}
+            >
+              <Filter className="w-3 h-3" />
+              Condition
             </button>
           </div>
-        </>
-      ) : (
-        <>
-          <div className="space-y-2">
-            <div>
-              <label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
-              <select
-                value={condition.type}
-                onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
-                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
-              >
-                <option value="equals">Equals (=)</option>
-                <option value="notEquals">Not Equals (≠)</option>
-                <option value="contains">Contains</option>
-                <option value="startsWith">Starts With</option>
-                <option value="endsWith">Ends With</option>
-                <option value="greaterThan">Greater Than (&gt;)</option>
-                <option value="lessThan">Less Than (&lt;)</option>
-                <option value="between">Between</option>
-              </select>
-            </div>
 
-            <div>
-              <label className="text-[10px] text-slate-400 uppercase">Value</label>
-              <input
-                type="text"
-                value={condition.value}
-                onChange={e => setCondition({ ...condition, value: e.target.value })}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && condition.value) {
-                    e.preventDefault();
-                    applyCondition();
-                  }
-                }}
-                placeholder="Enter value..."
-                className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
-              />
-            </div>
-
-            {condition.type === 'between' && (
-              <div>
-                <label className="text-[10px] text-slate-400 uppercase">And</label>
+          {activeTab === 'values' ? (
+            <>
+              <div className="relative">
+                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500" />
                 <input
                   type="text"
-                  value={condition.value2 || ''}
-                  onChange={e => setCondition({ ...condition, value2: e.target.value })}
+                  placeholder="Filter values..."
+                  value={search}
+                  onChange={e => setSearch(e.target.value)}
                   onKeyDown={(e) => {
-                    if (e.key === 'Enter' && condition.value && condition.value2) {
+                    if (e.key === 'Enter' && search) {
                       e.preventDefault();
-                      applyCondition();
+                      onSelectAll(filteredValues);
+                      onClose();
                     }
                   }}
-                  placeholder="Enter second value..."
-                  className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                  className="w-full bg-slate-900 border border-slate-700 rounded p-1.5 pl-8 pr-7 text-xs text-white focus:outline-none focus:border-blue-500"
+                  autoFocus
                 />
+                {search && (
+                  <button
+                    onClick={() => setSearch('')}
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
               </div>
-            )}
 
-            <button
-              onClick={applyCondition}
-              className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
-            >
-              Apply Condition
-            </button>
-          </div>
+              <div 
+                ref={listRef}
+                className="max-h-48 overflow-y-auto space-y-0.5 pr-1 custom-scrollbar"
+              >
+                {filteredValues.map((val, idx) => {
+                  const isDragSelected = isDragging && dragStart !== null && hoveredIndex !== null &&
+                    ((idx >= dragStart && idx <= hoveredIndex) || (idx <= dragStart && idx >= hoveredIndex));
+                  return (
+                    <div
+                      key={val}
+                      role="checkbox"
+                      aria-checked={selectedValues.includes(val)}
+                      tabIndex={0}
+                      onMouseDown={(e) => { e.preventDefault(); handleMouseDown(idx); }}
+                      onMouseEnter={() => handleMouseEnter(idx)}
+                      onClick={(e) => {
+                        if (didDragRef.current) return;
+                        if (e.shiftKey && lastClickedIndex !== null) {
+                          const start = Math.min(lastClickedIndex, idx);
+                          const end = Math.max(lastClickedIndex, idx);
+                          const itemsToSelect = filteredValues.slice(start, end + 1);
+                          const newSelected = new Set([...selectedValues, ...itemsToSelect]);
+                          onSelectAll(Array.from(newSelected));
+                        } else {
+                          onToggle(val);
+                        }
+                        setLastClickedIndex(idx);
+                      }}
+                      onKeyDown={(e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onToggle(val); setLastClickedIndex(idx); } }}
+                      className={cn(
+                        "flex items-center gap-2 p-1.5 rounded cursor-pointer group transition-colors select-none",
+                        isDragSelected ? "bg-blue-600/40" : "hover:bg-slate-700/50"
+                      )}
+                    >
+                      <div className={cn(
+                        "w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
+                        selectedValues.includes(val) ? "bg-blue-600 border-blue-600" : "border-slate-600 bg-slate-900 group-hover:border-slate-500"
+                      )}>
+                        {selectedValues.includes(val) && <Check className="w-3 h-3 text-white" />}
+                      </div>
+                      <span className="text-xs text-slate-300 truncate" title={val}>{val || '(Empty)'}</span>
+                    </div>
+                  );
+                })}
+                {filteredValues.length === 0 && (
+                  <div className="text-[10px] text-slate-500 text-center py-4 italic">No values found</div>
+                )}
+              </div>
 
-          {conditionResult.length > 0 && (
-            <div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
-              Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
-            </div>
+              <div className="flex items-center justify-between pt-2 border-t border-slate-700 mt-1">
+                <div className="flex items-center gap-3">
+                  <button
+                    onClick={() => {
+                      if (isAllSelected) {
+                        onSelectAll([]);
+                      } else {
+                        onSelectAll(uniqueValues);
+                      }
+                    }}
+                    className="text-[10px] font-black text-indigo-400 hover:text-indigo-300 transition-colors uppercase tracking-tight"
+                  >
+                    {isAllSelected ? 'Deselect All' : 'Select All'}
+                  </button>
+                  <span className="text-slate-600 font-bold">•</span>
+                  <button
+                    onClick={onClear}
+                    className="text-[10px] font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-tight"
+                  >
+                    Clear
+                  </button>
+                </div>
+                <button
+                  onClick={onClose}
+                  className="px-4 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-black rounded transition-colors shadow-lg active:scale-95 uppercase"
+                >
+                  OK
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="space-y-2">
+                <div>
+                  <label className="text-[10px] text-slate-400 uppercase">Condition Type</label>
+                  <select
+                    value={condition.type}
+                    onChange={e => setCondition({ ...condition, type: e.target.value as FilterType })}
+                    className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                  >
+                    <option value="equals">Equals (=)</option>
+                    <option value="notEquals">Not Equals (≠)</option>
+                    <option value="contains">Contains</option>
+                    <option value="startsWith">Starts With</option>
+                    <option value="endsWith">Ends With</option>
+                    <option value="greaterThan">Greater Than (&gt;)</option>
+                    <option value="lessThan">Less Than (&lt;)</option>
+                    <option value="between">Between</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="text-[10px] text-slate-400 uppercase">Value</label>
+                  <input
+                    type="text"
+                    value={condition.value}
+                    onChange={e => setCondition({ ...condition, value: e.target.value })}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && condition.value) {
+                        e.preventDefault();
+                        applyCondition();
+                      }
+                    }}
+                    placeholder="Enter value..."
+                    className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                  />
+                </div>
+
+                {condition.type === 'between' && (
+                  <div>
+                    <label className="text-[10px] text-slate-400 uppercase">And</label>
+                    <input
+                      type="text"
+                      value={condition.value2 || ''}
+                      onChange={e => setCondition({ ...condition, value2: e.target.value })}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' && condition.value && condition.value2) {
+                          e.preventDefault();
+                          applyCondition();
+                        }
+                      }}
+                      placeholder="Enter second value..."
+                      className="w-full mt-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-xs text-white focus:outline-none focus:border-blue-500"
+                    />
+                  </div>
+                )}
+
+                <button
+                  onClick={applyCondition}
+                  className="w-full py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded transition-colors"
+                >
+                  Apply Condition
+                </button>
+              </div>
+
+              {conditionResult.length > 0 && (
+                <div className="text-[10px] text-green-400 text-center pt-2 border-t border-slate-700">
+                  Found {conditionResult.length} matching value{conditionResult.length !== 1 ? 's' : ''}
+                </div>
+              )}
+            </>
           )}
-        </>
+        </div>,
+        portalContainer
       )}
     </div>
   );
diff --git a/src/components/PricingView.tsx b/src/components/PricingView.tsx
index 63fa1da..8b2c80a 100644
--- a/src/components/PricingView.tsx
+++ b/src/components/PricingView.tsx
@@ -1151,7 +1151,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
           <table ref={tableRef} className="w-full text-sm border-collapse table-fixed">
             <thead className="sticky top-0 z-10 bg-slate-900 border-b border-slate-700">
               <tr>
-                <th style={{ width: columnWidths.articleNo, ...(isPinned('articleNo') ? { left: getStickyLeft('articleNo') ?? 0, zIndex: getHeaderStickyRank('articleNo') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.articleNo, 
+                  ...(isPinned('articleNo') 
+                    ? { left: getStickyLeft('articleNo') ?? 0, zIndex: openFilter === 'sku' ? 500 : (getHeaderStickyRank('articleNo') ?? 0) } 
+                    : (openFilter === 'sku' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                     isPinned('articleNo') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('articleNo')}>
@@ -1175,12 +1180,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       value={articleNoColFilter}
                       onChange={setArticleNoColFilter}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('articleNo') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleNo', columnWidths.articleNo); }} />
                 </th>
-                <th style={{ width: columnWidths.articleName, ...(isPinned('articleName') ? { left: getStickyLeft('articleName') ?? 0, zIndex: getHeaderStickyRank('articleName') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.articleName, 
+                  ...(isPinned('articleName') 
+                    ? { left: getStickyLeft('articleName') ?? 0, zIndex: openFilter === 'name' ? 500 : (getHeaderStickyRank('articleName') ?? 0) } 
+                    : (openFilter === 'name' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                     isPinned('articleName') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('articleName')}>
@@ -1203,12 +1213,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       value={nameColFilter}
                       onChange={setNameColFilter}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('articleName') ? 200 : 50}
+                      zIndex={500}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'articleName', columnWidths.articleName); }} />
                 </th>
-                <th style={{ width: columnWidths.line, ...(isPinned('line') ? { left: getStickyLeft('line') ?? 0, zIndex: getHeaderStickyRank('line') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.line, 
+                  ...(isPinned('line') 
+                    ? { left: getStickyLeft('line') ?? 0, zIndex: openFilter === 'line' ? 500 : (getHeaderStickyRank('line') ?? 0) } 
+                    : (openFilter === 'line' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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('line') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('line')}>
@@ -1234,12 +1249,17 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setLineMultiFilter(vals)}
                       onClear={() => { setLineMultiFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('line') ? 200 : 50}
+                      zIndex={500}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'line', columnWidths.line); }} />
                 </th>
-                <th style={{ width: columnWidths.classification, ...(isPinned('classification') ? { left: getStickyLeft('classification') ?? 0, zIndex: getHeaderStickyRank('classification') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.classification, 
+                  ...(isPinned('classification') 
+                    ? { left: getStickyLeft('classification') ?? 0, zIndex: openFilter === 'classification' ? 500 : (getHeaderStickyRank('classification') ?? 0) } 
+                    : (openFilter === 'classification' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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('classification') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('classification')}>
@@ -1265,7 +1285,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setClassificationFilter(vals)}
                       onClear={() => { setClassificationFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('classification') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'classification', columnWidths.classification); }} />
@@ -1293,13 +1313,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setProductTypeFilter(vals)}
                       onClear={() => { setProductTypeFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('productType') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'productType', columnWidths.productType); }} />
                 </th>
 
-                <th style={{ width: columnWidths.itemToLogistic, ...(isPinned('itemToLogistic') ? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: getHeaderStickyRank('itemToLogistic') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.itemToLogistic, 
+                  ...(isPinned('itemToLogistic') 
+                    ? { left: getStickyLeft('itemToLogistic') ?? 0, zIndex: openFilter === 'logistic' ? 500 : (getHeaderStickyRank('itemToLogistic') ?? 0) } 
+                    : (openFilter === 'logistic' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} className={cn(
                     "text-left px-3 py-3 text-xs font-semibold text-pink-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                     isPinned('itemToLogistic') && "sticky bg-slate-900"
                   )} onClick={() => handleSort('itemToLogistic')}>
@@ -1313,7 +1338,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   const colKey = `prc_${col.index}`;
                   const width = columnWidths[colKey] ?? 100;
                   return (
-                    <th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
+                    <th key={col.index} style={{ 
+                      width, 
+                      ...(isPinned(colKey) 
+                        ? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) } 
+                        : (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {})) 
+                    }} className={cn(
                       "text-left px-3 py-3 text-xs font-semibold text-blue-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                       isPinned(colKey) && "sticky bg-slate-900"
                     )} onClick={() => handleSort(col.index)}>
@@ -1355,7 +1385,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   );
                 })}
 
-                <th style={{ width: columnWidths.unitsOuter, ...(isPinned('unitsOuter') ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: getHeaderStickyRank('unitsOuter') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.unitsOuter, 
+                  ...(isPinned('unitsOuter') 
+                    ? { left: getStickyLeft('unitsOuter') ?? 0, zIndex: openFilter === 'unitsOuter' ? 500 : (getHeaderStickyRank('unitsOuter') ?? 0) } 
+                    : (openFilter === 'unitsOuter' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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')}>
@@ -1381,13 +1416,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setUnitsOuterFilter(vals)}
                       onClear={() => { setUnitsOuterFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('unitsOuter') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'unitsOuter', columnWidths.unitsOuter); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerW, ...(isPinned('outerW') ? { left: getStickyLeft('outerW') ?? 0, zIndex: getHeaderStickyRank('outerW') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.outerW, 
+                  ...(isPinned('outerW') 
+                    ? { left: getStickyLeft('outerW') ?? 0, zIndex: openFilter === 'outerW' ? 500 : (getHeaderStickyRank('outerW') ?? 0) } 
+                    : (openFilter === 'outerW' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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"
                   )} onClick={() => handleSort('outerW')}>
@@ -1413,13 +1453,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setOuterWFilter(vals)}
                       onClear={() => { setOuterWFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('outerW') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerW', columnWidths.outerW); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerL, ...(isPinned('outerL') ? { left: getStickyLeft('outerL') ?? 0, zIndex: getHeaderStickyRank('outerL') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.outerL, 
+                  ...(isPinned('outerL') 
+                    ? { left: getStickyLeft('outerL') ?? 0, zIndex: openFilter === 'outerL' ? 500 : (getHeaderStickyRank('outerL') ?? 0) } 
+                    : (openFilter === 'outerL' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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"
                   )} onClick={() => handleSort('outerL')}>
@@ -1445,13 +1490,18 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setOuterLFilter(vals)}
                       onClear={() => { setOuterLFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('outerL') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerL', columnWidths.outerL); }} />
                 </th>
 
-                <th style={{ width: columnWidths.outerH, ...(isPinned('outerH') ? { left: getStickyLeft('outerH') ?? 0, zIndex: getHeaderStickyRank('outerH') ?? 0 } : {}) }} className={cn(
+                <th style={{ 
+                  width: columnWidths.outerH, 
+                  ...(isPinned('outerH') 
+                    ? { left: getStickyLeft('outerH') ?? 0, zIndex: openFilter === 'outerH' ? 500 : (getHeaderStickyRank('outerH') ?? 0) } 
+                    : (openFilter === 'outerH' ? { zIndex: 500, position: 'relative' } : {})) 
+                }} 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"
                   )} onClick={() => handleSort('outerH')}>
@@ -1477,7 +1527,7 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                       onSelectAll={vals => setOuterHFilter(vals)}
                       onClear={() => { setOuterHFilter([]); setOpenFilter(null); }}
                       onClose={() => setOpenFilter(null)}
-                      zIndex={isPinned('outerH') ? 200 : 50}
+                      zIndex={50}
                     />
                   )}
                   <ResizeHandle onMouseDown={e => { e.stopPropagation(); handleResizeStart(e, 'outerH', columnWidths.outerH); }} />
@@ -1487,7 +1537,12 @@ export function PricingView({ data, headers, onSaveRow, onCaptureState, onEdit,
                   const colKey = `con_${col.index}`;
                   const width = columnWidths[colKey] ?? 110;
                   return (
-                    <th key={col.index} style={{ width, ...(isPinned(colKey) ? { left: getStickyLeft(colKey) ?? 0, zIndex: getHeaderStickyRank(colKey) ?? 0 } : {}) }} className={cn(
+                    <th key={col.index} style={{ 
+                      width,
+                      ...(isPinned(colKey) 
+                        ? { left: getStickyLeft(colKey) ?? 0, zIndex: openFilter === colKey ? 500 : (getHeaderStickyRank(colKey) ?? 0) } 
+                        : (openFilter === colKey ? { zIndex: 500, position: 'relative' } : {})) 
+                    }} className={cn(
                       "text-left px-3 py-3 text-xs font-semibold text-orange-400 uppercase tracking-wider whitespace-nowrap group cursor-pointer hover:bg-slate-800/50 transition-colors relative",
                       isPinned(colKey) && "sticky bg-slate-900"
                     )} onClick={() => handleSort(col.index)}>