From fa14f578556700c772d88c2b447bcb83cb9d3832 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Thu, 29 Jan 2026 13:41:09 +0100
Subject: [PATCH] Restore Buy Box badge positions to match original layout; fix
 row layering in all views

---
 components/AdsPerformance.tsx | 2 +-
 components/ForecastView.tsx   | 2 +-
 components/WeeklyGrid.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/AdsPerformance.tsx b/components/AdsPerformance.tsx
index a358476..8f164ea 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/ForecastView.tsx b/components/ForecastView.tsx
index a54893c..2b8d614 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 fcbe0e0..81fcd8f 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -92,7 +92,6 @@ const WeeklyRow: React.FC<{
                         >
                             {row.sku || '-'}
                         </span>
-                        <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
                         <span className="text-[10px] font-bold text-slate-500 bg-slate-800 px-1.5 py-0.5 rounded border border-white/5">{row.asin}</span>
                     </div>
                     <div className="flex items-start gap-2 mb-1">
@@ -106,6 +105,7 @@ const WeeklyRow: React.FC<{
                             mode={top50Mode}
                             avgWeeklySales={velocityMap?.get(asin)}
                         />
+                        <BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
                     </div>
                     <span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
                 </div>