From 9a086e7c74be1938884eba51737af8ca48caa445 Mon Sep 17 00:00:00 2001
From: jadmsaadaot <91914654+jadmsaadaot@users.noreply.github.com>
Date: Thu, 9 May 2024 23:27:57 -0700
Subject: [PATCH] Fix side menu overflows and cuts on smaller screens (#2222)

---
 .../src/components/layout/SideNav/SideNav.tsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/epictrack-web/src/components/layout/SideNav/SideNav.tsx b/epictrack-web/src/components/layout/SideNav/SideNav.tsx
index 5b9b40c74..bd782cbcc 100644
--- a/epictrack-web/src/components/layout/SideNav/SideNav.tsx
+++ b/epictrack-web/src/components/layout/SideNav/SideNav.tsx
@@ -122,13 +122,19 @@ export const DrawerBox = ({ open = true }: { open?: boolean }) => {
     <Box
       data-testid={`sidenav`}
       sx={{
-        overflow: "hidden",
+        overflowY: "auto",
+        overflowX: "hidden",
         height: "100%",
         background: Palette.primary.main,
         padding: "16px 0px 57px 0px",
       }}
     >
-      <List sx={{ paddingTop: toggleDrawerMarginTop }}>
+      <List
+        sx={{
+          paddingTop: toggleDrawerMarginTop,
+          backgroundColor: "inherit",
+        }}
+      >
         <>
           {Object.keys(groupedRoutes).map((groupKey) => {
             return (
@@ -252,7 +258,7 @@ const SideNav = () => {
       <Drawer
         sx={{
           width: "15%",
-          background: Palette.primary.main,
+          backgroundColor: Palette.primary.main,
         }}
         onClose={handleToggleDrawer}
         anchor={"left"}