mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-15 15:02:04 +00:00
Marc-André Bombeck
a5a91e40bc
The Coach launch FAB sits fixed at bottom-right on mobile viewports and used to overlay any Recharts tooltip painted near the chart's lower-right corner. Tapping a data point on /insights/blutdruck opened the tooltip but the FAB covered the value readout, so the user couldn't read it. Add a singleton MutationObserver that watches every .recharts-tooltip-wrapper in the DOM for inline visibility flips (Recharts toggles `style.visibility: visible` when the tooltip should paint, and clears it otherwise). A useSyncExternalStore- backed hook surfaces the live boolean to the FAB, which fades to opacity-0 + pointer-events-none + aria-hidden while a tooltip is active. When the user releases / scrolls away and Recharts clears the wrapper the FAB fades back in. The observer is module-scoped: it attaches on the first subscriber and disconnects on the last unmount, so it costs nothing on routes that don't mount the FAB. SSR snapshot is always false so the initial server-rendered FAB stays fully interactive before hydration. End-to-end auto-hide behaviour belongs to the Playwright mobile suite (chart hover/long-press → FAB fades); the unit tests pin the SSR-safe contract and the FAB markup so the regression cannot silently revert.