fix: centered project select

src/components/layout/Navbar/components/ProjectSelectContainer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { IconEdit, IconPlus } from "@tabler/icons-react";
-import { Group, HoverCard } from "@mantine/core";
+import { Box, Group, HoverCard } from "@mantine/core";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import useProjectActions from "@/components/layout/Navbar/hooks/useProjectActions";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
@@ -13,12 +13,21 @@ const ProjectSelectContainer = () => {
     const { onCreateClick, onChangeClick } = useProjectActions();
 
     return (
-        <HoverCard zIndex={150} position={"right"}>
+        <HoverCard
+            zIndex={150}
+            position={"right"}>
             <HoverCard.Target>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}
                     onChange={value => value && setSelectedProjectId(value.id)}
+                    styles={{
+                        input: {
+                            textAlign: "center",
+                        },
+                    }}
+                    rightSection={<Box />}
+                    rightSectionWidth={"var(--mantine-spacing-md)"}
                 />
             </HoverCard.Target>
             <HoverCard.Dropdown