fix(style): Ensure scrollbar is consistent (#13354)

Author: mydea

src/components/sidebar/index.tsx

@@ -81,11 +81,11 @@ export async function Sidebar({path, versions}: SidebarProps) {
       });
 
   return (
-    <aside className={styles.sidebar}>
+    <aside className={`${styles.sidebar} py-3`}>
       <input type="checkbox" id={sidebarToggleId} className="hidden" />
       <style>{':root { --sidebar-width: 300px; }'}</style>
       <div className="md:flex flex-col items-stretch overflow-auto">
-        <div className="platform-selector">
+        <div className="platform-selector px-3">
           <div className="mb-3">
             <PlatformSelector
               platforms={platforms}
@@ -98,7 +98,7 @@ export async function Sidebar({path, versions}: SidebarProps) {
             </div>
           )}
         </div>
-        <div className={styles.toc}>
+        <div className={`${styles.toc} px-3`}>
           <ScrollActiveLink activeLinkSelector={activeLinkSelector} />
           <SidebarLinks path={path} />
         </div>

src/components/sidebar/style.module.scss

@@ -13,7 +13,6 @@
   flex-direction: column;
   width: 100%;
   z-index: 10;
-  padding: 1.5rem 1rem;
   border-right: 1px solid var(--border-color);
   position: fixed;
   display: none;
@@ -70,16 +69,9 @@
   }
 
   .toc {
-    overflow: auto;
     font-size: 0.875rem;
     flex: 1;
-    overflow-y: hidden;
-    overflow-x: hidden;
-
-    // https://stackoverflow.com/questions/35484742/hide-useless-scrollbars-that-show-up-on-windows-only
-    &:hover {
-      overflow-y: auto;
-    }
+    overflow: auto;
 
     @media only screen and (min-width: 768px) {
       display: block;