Tweak styles

Author: hasparus

src/app/(main)/community/events/map/meetup-map-popover.tsx renamed to src/app/(main)/community/events/map/map-popover.tsx

@@ -10,25 +10,23 @@ export type MeetupMapPointer = {
 
 const meetupNameById = new Map(meetups.map(({ node }) => [node.id, node.name]))
 
-type MeetupMapPopoverProps = {
+type MapPopoverProps = {
   activeMeetupId: string | null
   pointer: MeetupMapPointer
 }
 
-export function MeetupMapPopover({ activeMeetupId, pointer }: MeetupMapPopoverProps) {
+export function MapPopover({ activeMeetupId, pointer }: MapPopoverProps) {
   if (!activeMeetupId || !pointer.visible) return null
   const name = meetupNameById.get(activeMeetupId)
   if (!name) return null
   return (
-    <div
-      data-testid="meetup-map-popover"
-      className="pointer-events-none absolute z-10 hidden min-w-0 -translate-x-1/2 -translate-y-3 whitespace-nowrap rounded border border-neu-100 bg-neu-0 px-2 py-1 text-xs font-medium text-neu-900 shadow-sm group-hover/map:flex"
+    <span
+      className="pointer-events-none absolute left-0 top-0 z-10 hidden min-w-0 whitespace-nowrap border border-neu-200/40 bg-neu-0/40 px-2 py-1 text-xs font-medium text-neu-900 shadow-sm backdrop-blur-sm group-hover/map:flex"
       style={{
-        left: pointer.x,
-        top: pointer.y,
+        transform: `translate3d(calc(${pointer.x}px - 50%), calc(${pointer.y}px - 50% - 24px), 0)`,
       }}
     >
       {name}
-    </div>
+    </span>
   )
 }

src/app/(main)/community/events/meetups-map.tsx

@@ -12,7 +12,7 @@ import { useTheme } from "next-themes"
 import { meetups } from "@/components/meetups"
 
 import { bootMeetupsMap, type MapHandle, type MarkerPoint } from "./map/engine"
-import { MeetupMapPopover, type MeetupMapPointer } from "./map/meetup-map-popover"
+import { MapPopover, type MeetupMapPointer } from "./map/map-popover"
 import { MapSkeleton } from "./map-skeleton"
 import { MeetupsList } from "./meetups-list"
 import { asRgbString, MAP_COLORS, MapColors } from "./map/map-colors"
@@ -69,7 +69,9 @@ export function MeetupsMap() {
 
   const handlePointerLeave = () => {
     setPointer(previous =>
-      previous.visible ? { x: previous.x, y: previous.y, visible: false } : previous,
+      previous.visible
+        ? { x: previous.x, y: previous.y, visible: false }
+        : previous,
     )
   }
 
@@ -139,6 +141,9 @@ export function MeetupsMap() {
 
   return (
     <div
+      onMouseOut={() => {
+        setActiveMeetupId(null)
+      }}
       className="my-6 flex flex-row-reverse divide-neu-200 border border-neu-200 bg-[--sea] [--sea:--sea-light] dark:divide-neu-50 dark:border-neu-50 dark:[--sea:--sea-dark] max-md:flex-col max-md:divide-y md:h-[592px]"
       style={
         {
@@ -165,7 +170,7 @@ export function MeetupsMap() {
           }}
         />
 
-        <MeetupMapPopover activeMeetupId={activeMeetupId} pointer={pointer} />
+        <MapPopover activeMeetupId={activeMeetupId} pointer={pointer} />
 
         <InfoTip />