From c5c28dcde57d99765485e7a34b83958f2b37a83c Mon Sep 17 00:00:00 2001
From: AmirHossein Mahmoodi <amir.mahmoodi74@gmail.com>
Date: Sun, 17 Nov 2024 10:36:14 +0000
Subject: [PATCH] Feature/show scroll bar

---
 .../layouts/Dashboard/Content/index.jsx       |  2 +-
 .../layouts/Dashboard/Sidebar/SidebarList.jsx |  2 +-
 src/components/layouts/Dashboard/index.jsx    | 12 +++++-
 src/core/components/DataTable.jsx             |  2 +-
 src/layouts/FullPageLayout.jsx                |  4 +-
 src/layouts/MuiLayout.jsx                     | 38 +++++++------------
 6 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/layouts/Dashboard/Content/index.jsx b/src/components/layouts/Dashboard/Content/index.jsx
index 272f1fb..9593f8f 100644
--- a/src/components/layouts/Dashboard/Content/index.jsx
+++ b/src/components/layouts/Dashboard/Content/index.jsx
@@ -48,7 +48,7 @@ const Content = (props) => {
     }, [router]);
 
     return (
-        <FullPageLayout sx={{ mt: 3, position: "relative" }}>
+        <FullPageLayout sx={{ mt: 3, position: "relative", overflowX: "hidden" }}>
             <LoadingHardPage
                 icon={routingItem?.icon}
                 label={routingItem?.key ? `${t("routing_to")} ${t(routingItem?.key)}` : ""}
diff --git a/src/components/layouts/Dashboard/Sidebar/SidebarList.jsx b/src/components/layouts/Dashboard/Sidebar/SidebarList.jsx
index 74913d2..abcb389 100644
--- a/src/components/layouts/Dashboard/Sidebar/SidebarList.jsx
+++ b/src/components/layouts/Dashboard/Sidebar/SidebarList.jsx
@@ -96,7 +96,7 @@ export default function SidebarList({ handleDrawerToggle }) {
     }, [selectedKey]);
 
     return (
-        <List dense={true} sx={{ overflow: "scroll", p: 0 }}>
+        <List dense={true} sx={{ overflow: "auto", p: 0 }}>
             {itemMenu.map((itemArr, index) => {
                 let isDividerVisible = false;
                 return (
diff --git a/src/components/layouts/Dashboard/index.jsx b/src/components/layouts/Dashboard/index.jsx
index e687f6f..94c4184 100644
--- a/src/components/layouts/Dashboard/index.jsx
+++ b/src/components/layouts/Dashboard/index.jsx
@@ -17,7 +17,7 @@ const DashboardLayouts = (props) => {
     };
 
     return (
-        <FullPageLayout direction="row">
+        <FullPageLayout direction="row" sx={{ overflowX: "hidden", overflowY: "hidden" }}>
             <Header handleDrawerToggle={handleDrawerToggle} drawerWidth={drawerWidth} />
             <Sidebar
                 container={container}
@@ -25,7 +25,15 @@ const DashboardLayouts = (props) => {
                 handleDrawerToggle={handleDrawerToggle}
                 drawerWidth={drawerWidth}
             />
-            <FullPageLayout component="main" sx={{ flexGrow: 1, width: { sm: `calc(100% - ${drawerWidth}px)` } }}>
+            <FullPageLayout
+                component="main"
+                sx={{
+                    flexGrow: 1,
+                    width: { sm: `calc(100% - ${drawerWidth}px)` },
+                    overflowX: "hidden",
+                    overflowY: "hidden",
+                }}
+            >
                 <Toolbar />
                 <Content {...props} />
             </FullPageLayout>
diff --git a/src/core/components/DataTable.jsx b/src/core/components/DataTable.jsx
index 1dd7ef4..307bdff 100644
--- a/src/core/components/DataTable.jsx
+++ b/src/core/components/DataTable.jsx
@@ -142,7 +142,7 @@ function DataTable(props) {
                                 alignSelf: "center",
                                 whiteSpace: "nowrap",
                                 maxWidth: { xs: 100, sm: "100%" },
-                                overflowX: "scroll",
+                                overflowX: "auto",
                             }}
                             variant="caption"
                         >
diff --git a/src/layouts/FullPageLayout.jsx b/src/layouts/FullPageLayout.jsx
index c47af5d..61701b7 100644
--- a/src/layouts/FullPageLayout.jsx
+++ b/src/layouts/FullPageLayout.jsx
@@ -8,8 +8,8 @@ const FullPageLayout = (props) => {
             sx={{
                 width: "100%",
                 height: "100%",
-                overflowY: "scroll",
-                overflowX: "scroll",
+                overflowY: "auto",
+                overflowX: "auto",
                 ...props?.sx,
             }}
         >
diff --git a/src/layouts/MuiLayout.jsx b/src/layouts/MuiLayout.jsx
index 34739fd..53fe430 100644
--- a/src/layouts/MuiLayout.jsx
+++ b/src/layouts/MuiLayout.jsx
@@ -22,38 +22,26 @@ const MuiLayout = ({ children, isBot }) => {
                 <ThemeProvider theme={theme}>
                     <GlobalStyles
                         styles={{
-                            "*:not(.MuiTableContainer-root)::-webkit-scrollbar": {
-                                display: "none",
-                            },
-                            "*::-webkit-scrollbar": {
-                                height: "8px",
-                            },
-                            "*::-webkit-scrollbar-thumb": {
-                                background: `${theme.palette.primary.light}80`,
-                                borderRadius: "3px",
-                            },
-                            "*:not(.MuiTableContainer-root)": {
-                                scrollbarWidth: "none",
-                            },
-
                             "*": {
                                 scrollbarWidth: "thin",
                                 scrollbarColor: `${theme.palette.primary.light}80 transparent`,
                             },
-
-                            "*::-moz-scrollbar-thumb": {
-                                backgroundColor: `${theme.palette.primary.light}80`,
+                            "*&::-webkit-scrollbar": {
+                                width: "4px",
                             },
-                            [`@media (max-width: ${theme.breakpoints.values.sm}px)`]: {
-                                "*::-webkit-scrollbar": {
-                                    height: "4px",
-                                },
+                            "*&::-webkit-scrollbar-track": {
+                                boxShadow: "inset 0 0 5px #fff",
+                                borderRadius: "4px",
+                            },
+                            "*&::-webkit-scrollbar-thumb": {
+                                background: `${theme.palette.primary.light}80`,
+                                borderRadius: "4px",
                             },
                             " input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button ":
-                                {
-                                    "-webkit-appearance": "none",
-                                    margin: 0,
-                                },
+                            {
+                                "-webkit-appearance": "none",
+                                margin: 0,
+                            },
                             " input[type='number']": {
                                 "-moz-appearance": "textfield",
                             },