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

Fix Buy Box popup visibility: add row hover z-index and use bottom positioning

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-29 10:52:41 +01:00
parent 1dc06e8b3b
commit 9736a8194f
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ const AdsRow: React.FC<{
} }
return ( return (
<tr className="hover:bg-white/[0.02] transition-colors group"> <tr className="hover:bg-white/[0.02] transition-colors group relative hover:z-50">
<td className="p-4 py-3"> <td className="p-4 py-3">
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-0.5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
components/BuyBoxWarningBadge.tsx
+9 -9
View File
@@ -35,24 +35,24 @@ export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, bu
{/* Hover Popup */} {/* Hover Popup */}
{isHovered && ( {isHovered && (
<div className="absolute z-50 left-0 top-full mt-1 w-56 bg-slate-900 border border-amber-500/30 rounded-lg shadow-xl shadow-black/50 animate-fade-in overflow-hidden"> <div className="absolute z-[100] left-0 bottom-full mb-1 w-64 bg-slate-900 border border-amber-500/50 rounded-xl shadow-2xl shadow-black animate-fade-in overflow-hidden pointer-events-none">
<div className="bg-amber-500/20 px-3 py-2 border-b border-amber-500/30"> <div className="bg-amber-500/20 px-3 py-2 border-b border-white/10">
<span className="text-amber-400 text-[10px] font-black uppercase tracking-widest"> <span className="text-amber-400 text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
⚠️ Buy Box Lost <span>⚠️</span> Buy Box Lost Reason
</span> </span>
</div> </div>
<div className="p-2 space-y-1.5"> <div className="p-2 space-y-1">
{data.countries.map(country => ( {data.countries.map(country => (
<div <div
key={country} key={country}
className="flex items-start gap-2 px-2 py-1.5 rounded bg-slate-800/50 border border-white/5" className="flex items-start gap-2.5 px-3 py-2 rounded-lg bg-white/5 border border-white/5"
> >
<span className="text-base">{COUNTRY_FLAGS[country] || '🏳️'}</span> <span className="text-lg leading-none">{COUNTRY_FLAGS[country] || '🏳️'}</span>
<div className="flex flex-col min-w-0"> <div className="flex flex-col min-w-0">
<span className="text-[10px] font-black text-white uppercase tracking-tight"> <span className="text-[10px] font-black text-white uppercase tracking-tight opacity-60">
{country} {country}
</span> </span>
<span className="text-[10px] text-amber-400/90 truncate" title={data.reasons[country] || 'Unknown'}> <span className="text-xs font-bold text-amber-200 leading-tight">
{data.reasons[country] || 'Unknown'} {data.reasons[country] || 'Unknown'}
</span> </span>
</div> </div>
components/ForecastView.tsx
+1 -1
View File
@@ -80,7 +80,7 @@ const ForecastRow: React.FC<{
else achievementColor = 'bg-rose-500'; else achievementColor = 'bg-rose-500';
return ( return (
<tr key={item.asin} className="hover:bg-indigo-500/5 transition-colors group border-b border-slate-800/50 last:border-0"> <tr key={item.asin} className="hover:bg-indigo-500/5 transition-colors group border-b border-slate-800/50 last:border-0 relative hover:z-50">
{/* Product Info */} {/* Product Info */}
<td className="px-6 py-4"> <td className="px-6 py-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
components/WeeklyGrid.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ const WeeklyRow: React.FC<{
} }
return ( return (
<tr className="hover:bg-white/[0.02] transition-colors group"> <tr className="hover:bg-white/[0.02] transition-colors group relative hover:z-50">
<td className="p-3 py-2 sticky left-0 z-10 bg-slate-900 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 flex-col">
<div className="flex items-center gap-2 mb-0.5"> <div className="flex items-center gap-2 mb-0.5">