[ProjectScreen] Replace Grid with Hidden+Stack (#3076)

Co-authored-by: Jason Naylor <[email protected]>

src/components/ProjectScreen/index.tsx

@@ -1,4 +1,4 @@
-import { Grid } from "@mui/material";
+import { Hidden, Stack } from "@mui/material";
 import { ReactElement, useEffect } from "react";
 
 import { clearCurrentProject } from "components/Project/ProjectActions";
@@ -17,15 +17,19 @@ export default function ProjectScreen(): ReactElement {
   }, [dispatch]);
 
   return (
-    <Grid container justifyContent="center" spacing={2}>
-      <Grid item xs={12} sm={6}>
-        <Grid container justifyContent="flex-end">
+    <>
+      <Hidden smUp>
+        <Stack alignItems="center" spacing={2}>
           <ChooseProject />
-        </Grid>
-      </Grid>
-      <Grid item xs={12} sm={6}>
-        <CreateProject />
-      </Grid>
-    </Grid>
+          <CreateProject />
+        </Stack>
+      </Hidden>
+      <Hidden smDown>
+        <Stack direction="row" justifyContent="center" spacing={2}>
+          <ChooseProject />
+          <CreateProject />
+        </Stack>
+      </Hidden>
+    </>
   );
 }