fix(website): Make custom tooltips clickable on mobile

[tombch]

• Updates the CustomTooltip component to be clickable on touchscreen only, and hover-able otherwise.
• This PR was opened because I noticed the tooltip for multi field search and the date range field was not clickable on mobile, and sometimes flickered into view, due to being triggered by the hovering event.

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by appropriate, automated tests.
• Any manual testing that has been done is documented (i.e. what exactly was tested?)

🚀 Preview: https://multifieldsearch-tooltip.loculus.org

[claude]

Claude finished @tombch's task in 2m 5s —— View job

---

Code Review

• Read changed files and gather context
• Analyze code quality, security, performance, and accessibility

---

Good fix overall. The approach of using window.matchMedia('(pointer: coarse)') to distinguish touch-only devices is sensible. A few issues worth addressing:

SSR/Hydration mismatch — the most significant concern. isTouchOnly is computed inline during render. In Astro with SSR, window is undefined server-side, so the server always renders with isTouchOnly = false. On a touch device, the client re-renders with isTouchOnly = true, creating a mismatch. Between SSR render and hydration, hover events may briefly fire on touch devices. The fix is to use useState + useEffect:

const [isTouchOnly, setIsTouchOnly] = useState(false);
useEffect(() => {
    setIsTouchOnly(window.matchMedia('(pointer: coarse)').matches);
}, []);

Accessibility — the help icon Button in MultiFieldSearchField.tsx has no aria-label, so screen readers will announce an unlabeled button. Add aria-label="Field information" (or similar).

DateRangeField interaction — DateRangeField.tsx wasn't changed, but the tooltip anchor there is a <label> wrapping a checkbox. On mobile with click as the open event, tapping the label will both toggle the checkbox and open the tooltip simultaneously, which may be surprising. Worth checking that this works as intended, or moving the tooltip anchor to a separate element.

Fix hydration issue in CustomTooltip →

[claude]

This runs during render and causes an SSR/hydration mismatch in Astro — the server renders with isTouchOnly = false (no window), but a touch client re-renders with true. Between SSR and hydration, hover events briefly fire on touch devices. Prefer useState(false) + useEffect:

Suggested change

	const isTouchOnly = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
	const [isTouchOnly, setIsTouchOnly] = useState(false);
	useEffect(() => {
	setIsTouchOnly(window.matchMedia('(pointer: coarse)').matches);
	}, []);

And update the import to import { type ComponentProps, type FC, useEffect, useState } from 'react';

[tombch]

This doesn't cause a SSR issue as far as I understand, as isTouchOnly doesn't affect the rendered DOM. So I think adding state and an effect here is unnecessary. I also tested this with firefox's mobile browsing simulator and it didn't come up with any hydration errors

[theosanderson]

Yeah I think it's because the tooltip isn't rendered until you mouseover