christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:15:24 +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/BuyBoxWarningBadge.tsx
+9 -9
View File
@@ -35,24 +35,24 @@ export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, bu
{/* Hover Popup */}
{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="bg-amber-500/20 px-3 py-2 border-b border-amber-500/30">
<span className="text-amber-400 text-[10px] font-black uppercase tracking-widest">
⚠️ Buy Box Lost
<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-white/10">
<span className="text-amber-400 text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
<span>⚠️</span> Buy Box Lost Reason
</span>
</div>
<div className="p-2 space-y-1.5">
<div className="p-2 space-y-1">
{data.countries.map(country => (
<div
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">
<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}
</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'}
</span>
</div>