feat: add overlay scrollbar on sidebar and main content (#3764)

packages/console/src/containers/ConsoleContent/Sidebar/index.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import OverlayScrollbar from '@/components/OverlayScrollbar';
+
 import Item from './components/Item';
 import Section from './components/Section';
 import { useSidebarMenuItems } from './hook';
@@ -15,7 +17,7 @@ function Sidebar() {
   const { sections } = useSidebarMenuItems();
 
   return (
-    <div className={styles.sidebar}>
+    <OverlayScrollbar className={styles.sidebar}>
       {sections.map(({ title, items }) => (
         <Section key={title} title={t(title)}>
           {items.map(
@@ -33,7 +35,7 @@ function Sidebar() {
           )}
         </Section>
       ))}
-    </div>
+    </OverlayScrollbar>
   );
 }
 

packages/console/src/containers/ConsoleContent/index.module.scss

@@ -6,10 +6,14 @@
   overflow: hidden;
 }
 
-.main {
+.overlayScrollbarWrapper {
   flex-grow: 1;
-  padding: 0 _.unit(2);
-  overflow-y: scroll;
+}
+
+.main {
+  width: 100%;
+  padding: 0 _.unit(6) 0 _.unit(2);
+  min-width: 636px;
 
   > * {
     @include _.main-content-width;

packages/console/src/containers/ConsoleContent/index.tsx

@@ -1,5 +1,6 @@
 import { Navigate, Route, Routes, useOutletContext } from 'react-router-dom';
 
+import OverlayScrollbar from '@/components/OverlayScrollbar';
 import {
   ApiResourceDetailsTabs,
   SignInExperiencePage,
@@ -48,6 +49,7 @@ function ConsoleContent() {
   return (
     <div className={styles.content}>
       <Sidebar />
+      <OverlayScrollbar className={styles.overlayScrollbarWrapper}>
         <div ref={scrollableContent} className={styles.main}>
           <Routes>
             <Route path="*" element={<NotFound />} />
@@ -116,6 +118,7 @@ function ConsoleContent() {
             </Route>
           </Routes>
         </div>
+      </OverlayScrollbar>
     </div>
   );
 }

packages/console/src/scss/overlayscrollbars.scss

@@ -6,18 +6,28 @@
       width: 12px;
       padding: 8px 2px;
 
-
-      > .os-scrollbar-track {
-        > .os-scrollbar-handle {
-          background: var(--color-neutral-variant-80);
+      .os-scrollbar-handle {
         min-height: 40px;
+      }
+    }
 
-          &:hover {
+    &.os-scrollbar-horizontal {
+      height: 12px;
+      padding: 2px 8px;
+
+      .os-scrollbar-handle {
+        min-width: 40px;
+      }
+    }
+  }
+
+  &.os-theme-dark,
+  &.os-theme-light,
+  &.os-theme-dark.os-scrollbar:hover,
+  &.os-theme-light.os-scrollbar:hover {
+    .os-scrollbar-track .os-scrollbar-handle {
       background: var(--color-neutral-variant-80);
     }
   }
-      }
-    }
-  }
 }
 /* stylelint-enable selector-class-pattern */