feat: project select in the boards row

src/app/deals/components/shared/Boards/Boards.tsx

@@ -32,6 +32,7 @@ const Boards = () => {
             mt={"xs"}
             mb={"sm"}>
             <Group
+                align={"end"}
                 wrap={"nowrap"}
                 gap={0}>
                 <SortableDnd

src/app/deals/components/shared/Header/Header.tsx

@@ -22,13 +22,18 @@ const Header = () => {
         return (
             <Group
                 w={"100%"}
+                gap={0}
                 justify={"end"}
-                wrap={"nowrap"}
+                wrap={"nowrap"}>
-                pr={"md"}>
+                <Boards />
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}
                     onChange={value => value && setSelectedProject(value)}
+                    style={{
+                        borderBottom: "solid gray 2px",
+                        paddingBottom: 5,
+                    }}
                 />
             </Group>
         );
@@ -36,6 +41,7 @@ const Header = () => {
 
     const getMobileHeader = () => {
         return (
+            <>
                 <Group justify={"space-between"}>
                     <Box
                         p={"md"}
@@ -49,6 +55,8 @@ const Header = () => {
                         <IconSettings />
                     </Box>
                 </Group>
+                <Boards />
+            </>
         );
     };
 
@@ -60,7 +68,6 @@ const Header = () => {
                 gap={0}
                 w={"100%"}>
                 {isMobile ? getMobileHeader() : getDesktopHeader()}
-                <Boards />
             </Stack>
         </Group>
     );

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.module.css

@@ -1,5 +1,6 @@
 
 .container {
+    height: calc(100vh - 150px);
     @media (max-width: 48em) {
         width: 80vw;
         height: calc(100vh - 200px);

src/app/deals/components/shared/StatusColumnWrapper/StatusColumnWrapper.tsx

@@ -22,7 +22,7 @@ const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
                     scrollbarSize={10}
                     type={"always"}
                     scrollbars={"y"}>
-                    <Stack mah={"calc(100vh - 250px)"}>{children}</Stack>
+                    <Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
                 </ScrollArea>
             </Stack>
         </Box>