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

fix: ensure 100% opaque sticky headers and columns in Weekly Sales grid

Browse Source 
- 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.
This commit is contained in:
Christian Vidal Wolf
2026-01-21 17:13:51 +01:00
parent 500eb5aeff
commit 82bdf02a35
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+5 -5
View File
@@ -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>