fix: increase hover hitbox on map location markers

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 ### Improved
 
 - **Cleaner page paths in your reports.** Pages like `/products?_t=123456` or `/about?session=abc` now correctly show as `/products` and `/about`. Only marketing attribution parameters (like UTM tags) are preserved for traffic source tracking — all other junk parameters are automatically removed, so your Top Pages and Journeys stay clean without us having to chase down every new parameter format.
+- **Easier to hover country dots on the map.** The orange location markers on the world map are now much easier to interact with — you no longer need pixel-perfect aim to see the tooltip.
 - **Refreshed chart background.** The dashboard chart now has subtle horizontal lines instead of the old dotted background, giving the chart area a cleaner look with soft faded edges.
 - **Smoother loading transitions.** When your data finishes loading, the page now fades in smoothly instead of appearing all at once. This applies across Dashboard, Journeys, Funnels, Uptime, Settings, Notifications, and shared dashboards. If your data was already cached from a previous visit, it still loads instantly with no animation — the fade only kicks in when you're actually waiting for fresh data.
 - **Faster tab switching across the board.** Switching between Settings, Funnels, Uptime, and other tabs now shows your data instantly instead of flashing a loading skeleton every time. Previously visited tabs remember their data and show it right away, while quietly refreshing in the background so you always see the latest numbers without the wait.

components/dashboard/DottedMap.tsx

@@ -118,30 +118,30 @@ export default function DottedMap({ data, className }: DottedMapProps) {
           const rowIndex = _stagger.yToRowIndex.get(marker.y) ?? 0
           const offsetX = rowIndex % 2 === 1 ? _stagger.xStep / 2 : 0
           const info = markerData[index]
+          const cx = marker.x + offsetX
+          const cy = marker.y
           return (
-            <circle
-              cx={marker.x + offsetX}
-              cy={marker.y}
-              r={marker.size ?? DOT_RADIUS}
-              fill="#FD5E0F"
-              filter="url(#marker-glow)"
-              className="cursor-pointer"
+            <g
               key={`marker-${marker.x}-${marker.y}-${index}`}
+              className="cursor-pointer"
               onMouseEnter={(e) => {
                 if (info) {
-                  const rect = (e.target as SVGCircleElement).closest('svg')!.getBoundingClientRect()
-                  const svgX = marker.x + offsetX
-                  const svgY = marker.y
+                  const rect = (e.target as SVGElement).closest('svg')!.getBoundingClientRect()
                   setTooltip({
-                    x: rect.left + (svgX / MAP_WIDTH) * rect.width,
-                    y: rect.top + (svgY / MAP_HEIGHT) * rect.height,
+                    x: rect.left + (cx / MAP_WIDTH) * rect.width,
+                    y: rect.top + (cy / MAP_HEIGHT) * rect.height,
                     country: info.country,
                     pageviews: info.pageviews,
                   })
                 }
               }}
               onMouseLeave={() => setTooltip(null)}
-            />
+            >
+              {/* Invisible larger hitbox */}
+              <circle cx={cx} cy={cy} r={2.5} fill="transparent" />
+              {/* Visible dot */}
+              <circle cx={cx} cy={cy} r={marker.size ?? DOT_RADIUS} fill="#FD5E0F" filter="url(#marker-glow)" />
+            </g>
           )
         })}
       </svg>