feat: improves scrolling on sidebars

src/components/Sidebar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Box from "@mui/material/Box";
+
+interface Props {
+  header: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const Sidebar = ({ header, children }: Props) => {
+  return (
+    <Box
+      sx={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box sx={{ width: "100%" }}>{header}</Box>
+      <Box
+        sx={{
+          width: "100%",
+          overflowY: "scroll",
+          flexGrow: 1,
+        }}
+      >
+        <Box sx={{ width: "100%" }}>{children}</Box>
+      </Box>
+    </Box>
+  );
+};

src/components/Sidebars/Icons/IconCategory.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Grid from "@mui/material/Grid";
 import { Icon as IconI } from "../../../types";
 import { Icon } from "./Icon";
-import { Section } from "../Section";
+import { Section } from "../../Sidebar/Section";
 
 interface Props {
   name?: string;

src/components/Sidebars/Icons/index.tsx

@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import Grid from "@mui/material/Grid";
 import { IconCategory } from "./IconCategory";
 import { Icon as IconI } from "../../../types";
-import { Header } from "../Header";
+import { Sidebar } from "../../Sidebar";
+import { Header } from "../../Sidebar/Header";
 
 interface Props {
   icons: IconI[];
@@ -38,8 +39,7 @@ export const Icons = ({ icons, onClose }: Props) => {
   }, [icons]);
 
   return (
-    <>
-      <Header title="Icons" onClose={onClose} />
+    <Sidebar header={<Header title="Icons" onClose={onClose} />}>
       <Grid container spacing={4}>
         {categorisedIcons.map((cat) => (
           <Grid item xs={12} key={cat.name}>
@@ -47,6 +47,6 @@ export const Icons = ({ icons, onClose }: Props) => {
           </Grid>
         ))}
       </Grid>
-    </>
+    </Sidebar>
   );
 };

src/components/Sidebars/ProjectSettings/index.tsx

@@ -3,8 +3,9 @@ import { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import TextField from "@mui/material/TextField";
 import Grid from "@mui/material/Grid";
-import { Header } from "../Header";
-import { Section } from "../Section";
+import { Header } from "../../Sidebar/Header";
+import { Section } from "../../Sidebar/Section";
+import { Sidebar } from "../../Sidebar";
 
 interface Props {
   onClose: () => void;
@@ -28,8 +29,7 @@ export const ProjectSettings = ({ onClose }: Props) => {
   }, []);
 
   return (
-    <>
-      <Header title="Project settings" onClose={onClose} />
+    <Sidebar header={<Header title="Project settings" onClose={onClose} />}>
       <Section>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Grid container spacing={4}>
@@ -49,6 +49,6 @@ export const ProjectSettings = ({ onClose }: Props) => {
           </Grid>
         </form>
       </Section>
-    </>
+    </Sidebar>
   );
 };

src/components/Sidebars/Transition.tsx

@@ -23,8 +23,8 @@ export const Transition = ({ children, isIn }: Props) => {
           position: "absolute",
           top: 0,
           left: 0,
-          height: "100%",
           width: "100%",
+          height: "100%",
           borderRadius: 0,
         }}
       >

src/components/Sidebars/index.tsx

@@ -28,7 +28,7 @@ export const Sidebar = () => {
         sx={{
           position: "absolute",
           width: "400px",
-          height: "100vh",
+          height: "100%",
           top: 0,
           left: theme.customVars.sideNav.width,
           borderRadius: 0,