From 9736a8194f12c8081982c0cab1238a4e81c38e4d Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 29 Jan 2026 10:52:41 +0100
Subject: [PATCH] Fix Buy Box popup visibility: add row hover z-index and use
 bottom positioning

---
 components/AdsPerformance.tsx     |  2 +-
 components/BuyBoxWarningBadge.tsx | 18 +++++++++---------
 components/ForecastView.tsx       |  2 +-
 components/WeeklyGrid.tsx         |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx
index 99f6545..6e1578a 100644
--- a/components/AdsPerformance.tsx
+++ b/components/AdsPerformance.tsx
@@ -63,7 +63,7 @@ const AdsRow: React.FC<{
     }
 
     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">
                 <div className="flex flex-col gap-0.5">
                     <div className="flex items-center gap-2">
diff --git a/components/BuyBoxWarningBadge.tsx b/components/BuyBoxWarningBadge.tsx
index 9aa1358..467712b 100644
--- a/components/BuyBoxWarningBadge.tsx
+++ b/components/BuyBoxWarningBadge.tsx
@@ -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>
diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index 768a632..95835bf 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -80,7 +80,7 @@ const ForecastRow: React.FC<{
     else achievementColor = 'bg-rose-500';
 
     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 */}
             <td className="px-6 py-4">
                 <div className="flex flex-col gap-1">
diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 706f7b0..8d1b6f0 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -77,7 +77,7 @@ const WeeklyRow: React.FC<{
     }
 
     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">
                 <div className="flex flex-col">
                     <div className="flex items-center gap-2 mb-0.5">