1 files changed, 10 insertions, 10 deletions
diff --git a/frontend/src/components/StateIcon.tsx b/frontend/src/components/StateIcon.tsx
index f9683f63a..31e0b5243 100644
--- a/frontend/src/components/StateIcon.tsx
+++ b/frontend/src/components/StateIcon.tsx
@@ -1,4 +1,6 @@
-import { BuildKey } from "@/utilities";
+import { FunctionComponent } from "react";
+import { Group, List, Popover, Stack, Text } from "@mantine/core";
+import { useHover } from "@mantine/hooks";
 import {
   faCheck,
   faCheckCircle,
@@ -7,9 +9,7 @@ import {
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Group, List, Popover, Stack, Text } from "@mantine/core";
-import { useHover } from "@mantine/hooks";
-import { FunctionComponent } from "react";
+import { BuildKey } from "@/utilities";
 
 interface StateIconProps {
   matches: string[];
@@ -31,7 +31,7 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
       return <FontAwesomeIcon icon={faListCheck} />;
     } else {
       return (
-        <Text color={hasIssues ? "yellow" : "green"}>
+        <Text c={hasIssues ? "yellow" : "green"} span>
           <FontAwesomeIcon
             icon={hasIssues ? faExclamationCircle : faCheckCircle}
           />
@@ -48,9 +48,9 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
         </Text>
       </Popover.Target>
       <Popover.Dropdown>
-        <Group position="left" spacing="xl" noWrap grow>
-          <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto">
-            <Text color="green">
+        <Group justify="left" gap="xl" wrap="nowrap" grow>
+          <Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
+            <Text c="green">
               <FontAwesomeIcon icon={faCheck}></FontAwesomeIcon>
             </Text>
             <List>
@@ -59,8 +59,8 @@ const StateIcon: FunctionComponent<StateIconProps> = ({
               ))}
             </List>
           </Stack>
-          <Stack align="flex-start" justify="flex-start" spacing="xs" mb="auto">
-            <Text color="yellow">
+          <Stack align="flex-start" justify="flex-start" gap="xs" mb="auto">
+            <Text c="yellow">
               <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>
             </Text>
             <List>