diff options
Diffstat (limited to 'frontend/src/components/StateIcon.tsx')
| -rw-r--r-- | frontend/src/components/StateIcon.tsx | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/frontend/src/components/StateIcon.tsx b/frontend/src/components/StateIcon.tsx index 27d6ab4df..da2b2b80f 100644 --- a/frontend/src/components/StateIcon.tsx +++ b/frontend/src/components/StateIcon.tsx @@ -9,7 +9,7 @@ import { Stack, Text, } from "@mantine/core"; -import { useHover, useMediaQuery } from "@mantine/hooks"; +import { useDisclosure, useMediaQuery } from "@mantine/hooks"; import { faCheckCircle, faExclamationCircle, @@ -33,7 +33,7 @@ const StateIcon: FunctionComponent<StateIconProps> = ({ }) => { const hasIssues = dont.length > 0; - const { hovered, ref } = useHover(); + const [opened, { close, open }] = useDisclosure(false); const isMobile = useMediaQuery(`(max-width: ${em(750)})`); @@ -52,9 +52,9 @@ const StateIcon: FunctionComponent<StateIconProps> = ({ }; return ( - <Popover opened={hovered} position="top" width={360} withArrow withinPortal> + <Popover position="left" opened={opened} width={360} withArrow withinPortal> <Popover.Target> - <Text ref={ref}> + <Text onMouseEnter={open} onMouseLeave={close}> <PopoverTarget /> </Text> </Popover.Target> |