Merge branch 'feature/show_scroll_bar' into 'develop'

Feature/show scroll bar

See merge request witel-front-end/loan-facilities/expert-v2!17

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)}` : ""}

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 (

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>

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"
                         >

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,
             }}
         >

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",
                             },