diff --git a/apps/fishing-map/features/map/popups/MapPopups.tsx b/apps/fishing-map/features/map/popups/MapPopups.tsx index ea5dc4edd5..d909e8d56e 100644 --- a/apps/fishing-map/features/map/popups/MapPopups.tsx +++ b/apps/fishing-map/features/map/popups/MapPopups.tsx @@ -18,7 +18,9 @@ function MapPopups() { return ( - {hoverInteraction && } + {hoverInteraction && !clickInteraction?.features?.length && ( + + )} {clickInteraction && ( )} diff --git a/apps/fishing-map/features/map/popups/Popup.module.css b/apps/fishing-map/features/map/popups/Popup.module.css index 73a6043cfa..97261c19c9 100644 --- a/apps/fishing-map/features/map/popups/Popup.module.css +++ b/apps/fishing-map/features/map/popups/Popup.module.css @@ -4,6 +4,10 @@ z-index: 2; } +.contentWrapper { + filter: var(--filter-drop-shadow); +} + .arrow { position: absolute; width: 14px; @@ -40,7 +44,7 @@ } .hover .content { - transform: translate(var(--space-XS), var(--space-S)); + min-width: max-content; background: var(--color-primary-blue); color: var(--color-white); max-width: var(--sidebar-width); diff --git a/apps/fishing-map/features/map/popups/PopupWrapper.tsx b/apps/fishing-map/features/map/popups/PopupWrapper.tsx index 3299ceb553..a2df8aefdb 100644 --- a/apps/fishing-map/features/map/popups/PopupWrapper.tsx +++ b/apps/fishing-map/features/map/popups/PopupWrapper.tsx @@ -3,6 +3,7 @@ import cx from 'classnames' import { groupBy } from 'lodash' import { useSelector } from 'react-redux' import { + offset, autoPlacement, autoUpdate, useFloating, @@ -105,9 +106,10 @@ function PopupWrapper({ interaction, type = 'hover', className = '', onClose }: const apiEventStatus = useSelector(selectApiEventStatus) const arrowRef = useRef(null) - const { refs, floatingStyles, placement, middlewareData /*, update, elements */ } = useFloating({ + const { refs, floatingStyles, placement, middlewareData } = useFloating({ whileElementsMounted: autoUpdate, middleware: [ + offset(15), autoPlacement({ padding: 10 }), overflowMiddlware, arrow({ @@ -136,20 +138,13 @@ function PopupWrapper({ interaction, type = 'hover', className = '', onClose }: ), 'category' ) - - // useEffect(() => { - // if (elements.reference && elements.floating) { - // const cleanup = autoUpdate(elements.reference, elements.floating, update) - // return cleanup - // } - return (
-
+
{type === 'click' && ( )}