From c62afe7d02d84718d8213c3b274c5ce58bef6551 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Tue, 3 Dec 2024 15:03:11 +0900
Subject: Fixed match popover position (#2777)

---
 frontend/src/components/StateIcon.tsx | 8 ++++----
 1 file 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>
-- 
cgit v1.2.3