feat: custom scrollbar styles for table container dark mode

Add custom scrollbar styles for MuiTableContainer component.

src/context/theme-provider.tsx

@@ -102,6 +102,29 @@ const darkTheme = createTheme({
     },
   },
   components: {
+    MuiTableContainer: {
+      styleOverrides: {
+      root: {
+        overflow: 'auto',
+        /* Firefox */
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'currentColor transparent',
+
+        /* WebKit (Chrome, Edge, Safari) */
+        '&::-webkit-scrollbar': {
+          width: '5px',
+          height: '5px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'currentColor',
+          borderRadius: '8px',
+        },
+      },
+    },
+  },
     MuiButton: {
       styleOverrides: {
         root: {
@@ -280,4 +303,4 @@ const ThemeModeProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ThemeModeProvider;
+export default ThemeModeProvider;