Keep the hover card's corners round without its tail

client/src/components/Map/MapViewGL.test.tsx

@@ -942,6 +942,24 @@ describe('MapViewGL', () => {
     expect(glMarkers.created).toHaveLength(before)
   })
 
+  it.each([
+    ['mapbox-gl', () => mapboxgl.Popup],
+    ['maplibre-gl', () => maplibregl.Popup],
+  ] as const)('FE-COMP-MAPVIEWGL-068: the %s hover card clears its marker without a tail', async (provider, popupOf) => {
+    loadOnAttach()
+    const { unmount } = render(<MapViewGL places={[]} fitKey={1} glProvider={provider} />)
+    await act(async () => {})
+
+    // The tail is hidden in index.css, and it used to contribute 10px of the
+    // gap itself — the offset has to make those up or the card sits on top of
+    // the marker it describes.
+    const options = (popupOf() as unknown as { mock: { calls: [Record<string, unknown>][] } }).mock.calls[0]?.[0]
+    expect(options).toMatchObject({ className: 'trek-map-popup', offset: 26, closeButton: false })
+    // Leaves the map listeners attached otherwise, and the next case reads them
+    // back out of the same mock.
+    unmount()
+  })
+
   it('FE-COMP-MAPVIEWGL-027: clicking a GPX track selects its place unless a marker or cluster is on top', async () => {
     loadOnAttach()
     const onMarkerClick = vi.fn()

client/src/components/Map/mapPopupCss.test.ts

@@ -0,0 +1,37 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, it, expect } from 'vitest'
+
+// The GL map's hover card is styled from index.css while its geometry comes
+// from the vendor stylesheet, so the two only agree by convention. These read
+// the real files rather than a rendered component: jsdom applies no vendor CSS,
+// which is exactly the interaction that can break here.
+describe('GL hover popup css', () => {
+  // Vitest runs with the client package as its root, so cwd is stable here.
+  const css = readFileSync(resolve(process.cwd(), 'src/index.css'), 'utf8')
+  const block = (selector: string): string => {
+    const at = css.indexOf(selector)
+    expect(at, `${selector} missing from index.css`).toBeGreaterThan(-1)
+    return css.slice(at, css.indexOf('}', at) + 1)
+  }
+
+  it('FE-COMP-MAPPOPUPCSS-001: the tail is off, not merely painted white', () => {
+    // Colouring it left a visible notch under the card in every theme.
+    expect(block('.trek-map-popup .maplibregl-popup-tip')).toMatch(/display:\s*none/)
+  })
+
+  it('FE-COMP-MAPPOPUPCSS-002: the corner radius outweighs the vendor anchor rules', () => {
+    // maplibre-gl.css squares one corner per anchor so the tail meets the card
+    // flush. With the tail gone that is just a squared corner, and the vendor
+    // rule carries the same specificity as a plain `.trek-map-popup .content`
+    // — whichever sheet loads last would win. The `[class]` guard settles it.
+    const radius = block('.trek-map-popup[class] .maplibregl-popup-content')
+    expect(radius).toMatch(/border-radius:\s*10px/)
+  })
+
+  it('FE-COMP-MAPPOPUPCSS-003: leaflet click popups keep their tail', () => {
+    // Those are anchored, dismissable popups where the tail earns its place —
+    // the fix above is scoped to the GL hover card on purpose.
+    expect(block('.leaflet-popup-tip')).not.toMatch(/display:\s*none/)
+  })
+})