refactor(console): use overlay scrollbar in tables (#3029)

packages/console/package.json

@@ -60,6 +60,8 @@
     "ky": "^0.33.0",
     "lint-staged": "^13.0.0",
     "nanoid": "^4.0.0",
+    "overlayscrollbars": "^2.0.2",
+    "overlayscrollbars-react": "^0.5.0",
     "parcel": "2.8.2",
     "postcss": "^8.4.6",
     "postcss-modules": "^4.3.0",

packages/console/src/App.tsx

@@ -8,7 +8,10 @@ import {
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 
+import 'overlayscrollbars/styles/overlayscrollbars.css';
 import './scss/normalized.scss';
+import './scss/overlayscrollbars.scss';
+
 // eslint-disable-next-line import/no-unassigned-import
 import '@fontsource/roboto-mono';
 import AppBoundary from '@/components/AppBoundary';

packages/console/src/components/OverlayScrollbar/index.tsx

@@ -0,0 +1,11 @@
+import type { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+
+const OverlayScrollbar = (props: OverlayScrollbarsComponentProps) => (
+  <OverlayScrollbarsComponent
+    options={{ scrollbars: { autoHide: 'leave', autoHideDelay: 0 } }}
+    {...props}
+  />
+);
+
+export default OverlayScrollbar;

packages/console/src/components/Table/index.tsx

@@ -7,6 +7,7 @@ import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { Props as PaginationProps } from '@/components/Pagination';
 import Pagination from '@/components/Pagination';
 
+import OverlayScrollbar from '../OverlayScrollbar';
 import TableEmpty from './TableEmpty';
 import TableError from './TableError';
 import TableLoading from './TableLoading';
@@ -94,7 +95,7 @@ const Table = <
             </tr>
           </thead>
         </table>
-        <div className={classNames(styles.bodyTable, bodyClassName)}>
+        <OverlayScrollbar className={classNames(styles.bodyTable, bodyClassName)}>
           <table>
             <tbody>
               {isLoading && (
@@ -156,7 +157,7 @@ const Table = <
                 ))}
             </tbody>
           </table>
-        </div>
+        </OverlayScrollbar>
       </div>
       {pagination && <Pagination className={styles.pagination} {...pagination} />}
     </div>

packages/console/src/scss/overlayscrollbars.scss

@@ -0,0 +1,21 @@
+/* stylelint-disable selector-class-pattern */
+.os-scrollbar {
+  &.os-theme-dark,
+  &.os-theme-light {
+    &.os-scrollbar-vertical {
+      width: 12px;
+
+      > .os-scrollbar-track {
+        > .os-scrollbar-handle {
+          background: var(--color-neutral-variant-80);
+          min-height: 40px;
+
+          &:hover {
+            background: var(--color-neutral-variant-80);
+          }
+        }
+      }
+    }
+  }
+}
+/* stylelint-enable selector-class-pattern */

pnpm-lock.yaml

@@ -148,6 +148,8 @@ importers:
       ky: ^0.33.0
       lint-staged: ^13.0.0
       nanoid: ^4.0.0
+      overlayscrollbars: ^2.0.2
+      overlayscrollbars-react: ^0.5.0
       parcel: 2.8.2
       postcss: ^8.4.6
       postcss-modules: ^4.3.0
@@ -217,6 +219,8 @@ importers:
       ky: 0.33.0
       lint-staged: 13.0.0
       nanoid: 4.0.0
+      overlayscrollbars: 2.0.3
+      overlayscrollbars-react: 0.5.0_zkbntqz6lsvwr4f42dmhn2ssde
       parcel: 2.8.2_postcss@8.4.6
       postcss: 8.4.6
       postcss-modules: 4.3.0_postcss@8.4.6
@@ -11210,6 +11214,20 @@ packages:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
     dev: true
 
+  /overlayscrollbars-react/0.5.0_zkbntqz6lsvwr4f42dmhn2ssde:
+    resolution: {integrity: sha512-uCNTnkfWW74veoiEv3kSwoLelKt4e8gTNv65D771X3il0x5g5Yo0fUbro7SpQzR9yNgi23cvB2mQHTTdQH96pA==}
+    peerDependencies:
+      overlayscrollbars: ^2.0.0
+      react: '>=16.8.0 || ^18.0.0'
+    dependencies:
+      overlayscrollbars: 2.0.3
+      react: 18.2.0
+    dev: true
+
+  /overlayscrollbars/2.0.3:
+    resolution: {integrity: sha512-boOkJFER1Tc21sxF4a7ghGl+ETV3WtP7YgsUyDPo1VTHUIPdQLfnTzMyOOdMkKkVcpJOYMKwwr4m+saCtgawCg==}
+    dev: true
+
   /p-cancelable/3.0.0:
     resolution: {integrity: sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==}
     engines: {node: '>=12.20'}