From 6ba07c60f640b2eaf615be2b938cde2aa8170c95 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 27 Apr 2026 11:37:10 +0200
Subject: [PATCH] Fix: tooltip on TOTALS row follows mouse cursor and renders
 above it

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 components/WeeklyGrid.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx
index 2ae66d3..d56a1b3 100644
--- a/components/WeeklyGrid.tsx
+++ b/components/WeeklyGrid.tsx
@@ -799,12 +799,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
                                     const isHovered = hoveredTotalWeek === week;
 
                                     return (
-                                    <th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10 relative"
-                                        onMouseEnter={(e) => {
-                                            const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-                                            setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top });
-                                            setHoveredTotalWeek(week);
-                                        }}
+                                    <th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10"
+                                        onMouseEnter={() => setHoveredTotalWeek(week)}
+                                        onMouseMove={(e) => setTooltipPos({ x: e.clientX, y: e.clientY })}
                                         onMouseLeave={() => { setHoveredTotalWeek(null); setTooltipPos(null); }}
                                     >
                                         <div className="flex flex-col items-center">
@@ -839,7 +836,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
 
                                         {isHovered && tooltipPos && (
                                             <div className="pointer-events-none fixed z-[9999] w-64 bg-slate-900 border border-white/20 rounded-xl shadow-2xl p-3 text-left"
-                                                style={{ left: tooltipPos.x, top: tooltipPos.y - 8, transform: 'translate(-50%, -100%)' }}
+                                                style={{ left: tooltipPos.x + 16, top: tooltipPos.y - 16, transform: 'translateY(-100%)' }}
                                             >
                                                 <div className="text-[10px] font-black text-white/50 uppercase tracking-widest mb-2">{week}</div>