Fix: tooltip on TOTALS row follows mouse cursor and renders above it

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:37:10 +02:00
co-authored by Claude Sonnet 4.6
parent 99e4b2c34b
commit 6ba07c60f6
+4 -7
View File
@@ -799,12 +799,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
const isHovered = hoveredTotalWeek === week; const isHovered = hoveredTotalWeek === week;
return ( return (
<th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10 relative" <th key={week} className="p-3 text-sm font-black text-white text-center border-r border-white/10"
onMouseEnter={(e) => { onMouseEnter={() => setHoveredTotalWeek(week)}
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); onMouseMove={(e) => setTooltipPos({ x: e.clientX, y: e.clientY })}
setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top });
setHoveredTotalWeek(week);
}}
onMouseLeave={() => { setHoveredTotalWeek(null); setTooltipPos(null); }} onMouseLeave={() => { setHoveredTotalWeek(null); setTooltipPos(null); }}
> >
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
@@ -839,7 +836,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
{isHovered && tooltipPos && ( {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" <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> <div className="text-[10px] font-black text-white/50 uppercase tracking-widest mb-2">{week}</div>