christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix: use fixed-position tooltip on TOTALS row to escape overflow container clipping

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:28:49 +02:00
co-authored by Claude Sonnet 4.6
parent b01401272c
commit 9f8e51e2f3
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+11 -4
View File
@@ -95,6 +95,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
const [primaryMetric, setPrimaryMetric] = useState<'units' | 'revenue'>('units'); const [primaryMetric, setPrimaryMetric] = useState<'units' | 'revenue'>('units');
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
const [hoveredTotalWeek, setHoveredTotalWeek] = useState<string | null>(null); const [hoveredTotalWeek, setHoveredTotalWeek] = useState<string | null>(null);
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null);
// State for Column Filters (SKU, ASIN, Title, Line) // State for Column Filters (SKU, ASIN, Title, Line)
const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({}); const [columnFilters, setColumnFilters] = useState<Record<string, ColumnFilterCondition>>({});
@@ -799,8 +800,12 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
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 relative"
onMouseEnter={() => setHoveredTotalWeek(week)} onMouseEnter={(e) => {
onMouseLeave={() => setHoveredTotalWeek(null)} const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top });
setHoveredTotalWeek(week);
}}
onMouseLeave={() => { setHoveredTotalWeek(null); setTooltipPos(null); }}
> >
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{primaryMetric === 'units' ? ( {primaryMetric === 'units' ? (
@@ -832,8 +837,10 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
</div> </div>
</div> </div>
{isHovered && ( {isHovered && tooltipPos && (
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 w-64 bg-slate-900 border border-white/20 rounded-xl shadow-2xl p-3 text-left pointer-events-none"> <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%)' }}
>
<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>
{/* Semana anterior */} {/* Semana anterior */}