christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 12:25:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix UI overlap for Stock filter dropdown by adjusting z-indices

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-27 21:17:38 +01:00
parent db65509bab
commit f521dd2921
4 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+1 -1
View File
@@ -370,7 +370,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({ data, filters, top50Ran
<div className="overflow-x-auto flex-1 custom-scrollbar">
<table className="w-full text-left border-collapse text-[11px]">
<thead className="sticky top-0 z-20 bg-[#1A1F29] shadow-sm">
<tr className="border-b border-white/5">
<tr className="border-b border-white/5 relative z-30">
<th className="p-4 font-black text-slate-400 uppercase tracking-widest min-w-[250px]">
<div className="flex items-center gap-2">
<span>PRODUCT</span>
components/ForecastView.tsx
+2 -2
View File
@@ -358,8 +358,8 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
</div>
<div className="overflow-x-auto">
<table className="w-full text-left text-sm whitespace-nowrap">
<thead className="bg-slate-950 text-slate-500 uppercase text-[10px] font-black tracking-widest border-b border-border">
<tr>
<thead className="bg-slate-950 text-slate-500 uppercase text-[10px] font-black tracking-widest border-b border-border sticky top-0 z-20">
<tr className="relative z-30">
<th className="px-6 py-4">
<div className="flex items-center gap-2">
<span>Product Info</span>
components/InColumnStockFilter.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export const InColumnStockFilter: React.FC<InColumnStockFilterProps> = ({ curren
</button>
{isOpen && (
<div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[100] p-2 animate-in fade-in zoom-in duration-150">
<div className="absolute left-0 mt-2 w-48 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl z-[999] p-2 animate-in fade-in zoom-in duration-150">
<div className="px-2 py-1.5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-800 mb-1 flex justify-between items-center">
<span>Stock Filter</span>
{currentFilters.length > 0 && (
components/WeeklyGrid.tsx
+2 -2
View File
@@ -404,7 +404,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
<div className="overflow-x-auto overflow-y-auto h-full max-h-[calc(100vh-220px)] custom-scrollbar">
<table className="w-full text-left border-collapse min-w-[max-content]">
<thead className="sticky top-0 z-20 bg-slate-900">
<tr className="bg-slate-900 border-b border-white/10">
<tr className="bg-slate-900 border-b border-white/10 relative z-30">
<th
onClick={() => handleSort('rank', 'rank')}
className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-40 bg-slate-900 border-r border-white/10 min-w-[240px] cursor-pointer hover:bg-white/5 transition-colors group"
@@ -469,7 +469,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
</th>
))}
</tr>
<tr className="bg-indigo-950 border-b border-white/10">
<tr className="bg-indigo-950 border-b border-white/10 relative z-20">
<th className="p-3 text-sm font-black text-white sticky left-0 z-40 bg-indigo-950 border-r border-white/10">TOTALS</th>
{weeks.map((week, idx) => (
<th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10">