Fix MoveTooltip persistence on mobile by clearing tooltip state on position changes

Co-authored-by: kevinjosethomas <46242684+kevinjosethomas@users.noreply.github.com>

Author: Copilot

src/components/Analysis/BlunderMeter.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
 
 import {
@@ -216,6 +216,11 @@ function MovesList({
     position: { x: number; y: number }
   } | null>(null)
 
+  // Clear tooltip when position changes (indicated by colorSanMapping change)
+  useEffect(() => {
+    setTooltipData(null)
+  }, [colorSanMapping])
+
   const filteredMoves = () => {
     return moves.slice(0, 6).filter((move) => move.probability >= 8)
   }
@@ -338,6 +343,11 @@ function Meter({
     position: { x: number; y: number }
   } | null>(null)
 
+  // Clear tooltip when position changes (indicated by colorSanMapping change)
+  useEffect(() => {
+    setTooltipData(null)
+  }, [colorSanMapping])
+
   const filteredMoves = () => {
     return moves.slice(0, 6).filter((move) => move.probability >= 8)
   }

src/components/Analysis/Highlight.tsx

@@ -61,6 +61,11 @@ export const Highlight: React.FC<Props> = ({
     position: { x: number; y: number }
   } | null>(null)
 
+  // Clear tooltip when position changes (indicated by currentNode change)
+  useEffect(() => {
+    setTooltipData(null)
+  }, [currentNode])
+
   const findMatchingMove = (move: string, source: 'maia' | 'stockfish') => {
     if (source === 'maia') {
       return recommendations.stockfish?.find((rec) => rec.move === move)

src/components/Analysis/MoveMap.tsx

@@ -8,7 +8,7 @@ import {
   CartesianGrid,
   ResponsiveContainer,
 } from 'recharts'
-import { useContext, useState } from 'react'
+import { useContext, useState, useEffect } from 'react'
 import { ColorSanMapping } from 'src/types'
 import type { Key } from 'chessground/types'
 import type { DrawShape } from 'chessground/draw'
@@ -65,6 +65,13 @@ export const MoveMap: React.FC<Props> = ({
     y: number
   } | null>(null)
 
+  // Clear tooltip when position changes (indicated by colorSanMapping change)
+  useEffect(() => {
+    setHoveredMove(null)
+    setHoveredMoveData(null)
+    setMousePosition(null)
+  }, [colorSanMapping])
+
   // Responsive font sizing based on screen width
   const getAxisLabelFontSize = () => {
     if (width < 640) return 10 // Very small screens