From 82bdf02a35e0dd55156a65a27344c9956c52ab3c Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 21 Jan 2026 17:13:51 +0100
Subject: [PATCH] fix: ensure 100% opaque sticky headers and columns in Weekly
 Sales grid

- Replaced semi-transparent backgrounds with solid opaque colors.
- Removed backdrop blurs from sticky elements to prevent scroll artifacts.
- Refined z-index layering for sticky intersections.
---
 components/WeeklyGrid.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 0e4aea9..867e10b 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -152,9 +152,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
             <div className="bg-slate-900 border border-white/10 rounded-xl overflow-hidden shadow-2xl">
                 <div className="overflow-x-auto overflow-y-auto max-h-[calc(100vh-360px)] custom-scrollbar">
                     <table className="w-full text-left border-collapse min-w-[max-content]">
-                        <thead className="sticky top-0 z-20">
+                        <thead className="sticky top-0 z-20 bg-slate-900">
                             <tr className="bg-slate-900 border-b border-white/10">
-                                <th className="p-3 text-[11px] font-black text-slate-400 uppercase tracking-widest sticky left-0 z-30 bg-slate-900 border-r border-white/10 min-w-[240px]">Product Details</th>
+                                <th 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]">Product Details</th>
                                 {weeks.map(week => (
                                     <th
                                         key={week}
@@ -191,8 +191,8 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
                                     </th>
                                 ))}
                             </tr>
-                            <tr className="bg-indigo-950/40 backdrop-blur-md border-b border-white/10">
-                                <th className="p-3 text-sm font-black text-white sticky left-0 z-30 bg-indigo-900/60 border-r border-white/10">TOTALS</th>
+                            <tr className="bg-indigo-950 border-b border-white/10">
+                                <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">
                                         <div className="flex flex-col items-center">
@@ -212,7 +212,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data }) => {
                             {paginatedRows.length > 0 ? (
                                 paginatedRows.map((row) => (
                                     <tr key={row.id} className="hover:bg-white/[0.02] transition-colors group">
-                                        <td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 md:bg-slate-900/95 backdrop-blur-sm group-hover:bg-slate-800 border-r border-white/10">
+                                        <td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 group-hover:bg-slate-800 border-r border-white/10">
                                             <div className="flex flex-col">
                                                 <div className="flex items-center gap-2 mb-0.5">
                                                     <span className="text-xs font-black text-indigo-400 uppercase tracking-tighter truncate max-w-[120px]">{row.sku}</span>