fix: ensure filter dropdowns are not covered by pinned columns

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,12 +188,14 @@ export function ColumnFilterPopover({
   }, []);
 
   return (
+    <div className="fixed inset-0 z-0 pointer-events-none">
+      {portalContainer && createPortal(
         <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",
+            "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: zIndex >= 200 ? 9999 : zIndex }}
+          style={{ zIndex: 9999 }}
           onClick={(e) => e.stopPropagation()}
         >
           <button
@@ -376,6 +409,9 @@ export function ColumnFilterPopover({
               )}
             </>
           )}
+        </div>,
+        portalContainer
+      )}
     </div>
   );
 }

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)}>