From e8d3b6f0dd417e504ee80f3729634080f67d8d11 Mon Sep 17 00:00:00 2001
From: LASER-Yi <liangyi0007@gmail.com>
Date: Tue, 27 Sep 2022 22:03:30 +0800
Subject: [PATCH] Fix popover width in the manual search modal

---
 frontend/src/components/modals/ManualSearchModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index 45c2c0ceb..d6d469cb7 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/frontend/src/components/modals/ManualSearchModal.tsx
@@ -237,7 +237,7 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
   const { ref, hovered } = useHover();
 
   return (
-    <Popover opened={hovered} position="top">
+    <Popover opened={hovered} position="top" width={360} withArrow>
       <Popover.Target>
         <Text color={hasIssues ? "yellow" : "green"} ref={ref}>
           <FontAwesomeIcon
@@ -246,8 +246,8 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
         </Text>
       </Popover.Target>
       <Popover.Dropdown>
-        <Group align="flex-start" spacing="xl">
-          <Stack align="flex-start" spacing="xs">
+        <Group position="left" spacing="xl" noWrap grow>
+          <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto">
             <Text color="green">
               <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
             </Text>
@@ -257,7 +257,7 @@ const StateIcon: FunctionComponent<{ matches: string[]; dont: string[] }> = ({
               ))}
             </List>
           </Stack>
-          <Stack align="flex-start" spacing="xs">
+          <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto">
             <Text color="yellow">
               <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>
             </Text>