fix: improve Apple Watch detection with multi-heuristic approach (#285)

* fix: expand Apple Watch detection to cover all model resolutions

* fix: improve Apple Watch detection with multi-heuristic approach

* fix: add proper dependencies to Map2D useMemo to prevent stale route data

Author: samcm

src/components/Charts/Map2D/Map2D.tsx

@@ -287,7 +287,7 @@ function Map2DChartComponent({
       series,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mapLoaded]); // Only recalculate when map loads - after that we update via setOption
+  }, [mapLoaded, routes, showEffect, lineColor, title]); // Recalculate when key props change
 
   // Don't render until map is loaded
   if (!mapLoaded) {

src/routes/__root.tsx

@@ -120,17 +120,28 @@ function RootComponent(): JSX.Element {
   const [isAppleWatch, setIsAppleWatch] = useState(false);
   const router = useRouter();
 
-  // Detect Apple Watch screen size (312-416px wide across all models)
+  // Detect Apple Watch using multiple heuristics
+  // Apple Watch reports as iPhone but has distinctive screen dimensions
   useEffect(() => {
-    const checkScreenSize = (): void => {
-      setIsAppleWatch(window.innerWidth <= 416);
+    const checkIsAppleWatch = (): void => {
+      const isIOS = /iPhone/.test(navigator.userAgent);
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+
+      // Apple Watch specific dimensions (all models: 312-416px wide, 340-502px tall)
+      // Exclude iPhone dimensions which start at 375px wide minimum (iPhone SE)
+      const isWatchWidth = screenWidth >= 312 && screenWidth <= 416;
+      const isWatchHeight = screenHeight >= 340 && screenHeight <= 502;
+      const isTooSmallForPhone = screenWidth < 375; // iPhones are 375px+ wide
+
+      setIsAppleWatch(isIOS && isWatchWidth && isWatchHeight && isTooSmallForPhone);
     };
 
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
+    checkIsAppleWatch();
+    window.addEventListener('resize', checkIsAppleWatch);
 
     return () => {
-      window.removeEventListener('resize', checkScreenSize);
+      window.removeEventListener('resize', checkIsAppleWatch);
     };
   }, []);