scroll app

src/app/template.js

@@ -11,14 +11,18 @@ const Template = ({ children }) => {
             <ThemeProvider theme={theme}>
                 <GlobalStyles
                     styles={{
-                        "&::-webkit-scrollbar": {
+                        "*": {
+                            scrollbarWidth: "thin",
+                            scrollbarColor: `#155175 transparent`,
+                        },
+                        "*&::-webkit-scrollbar": {
                             width: "5px",
                         },
-                        "&::-webkit-scrollbar-track": {
+                        "*&::-webkit-scrollbar-track": {
                             boxShadow: "inset 0 0 5px #fff",
                             borderRadius: "5px",
                         },
-                        "&::-webkit-scrollbar-thumb": {
+                        "*&::-webkit-scrollbar-thumb": {
                             background: "#155175",
                             borderRadius: "5px",
                         },

src/components/layouts/dashboard/headerWithSidebar/index.jsx

@@ -105,7 +105,7 @@ const HeaderWithSidebar = ({ children }) => {
             </Drawer>
             <Main open={open} sx={{ height: '100%', width: '100%', overflow: 'hidden' }}>
                 <DrawerHeader />
-                <Box sx={{ height: '100%', width: '100%', overflowY: 'scroll', overflowX: 'hidden', }}>
+                <Box sx={{ height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', }}>
                     {children}
                 </Box>
             </Main>