From faae1f042fc6e5585a29931046c1c90a0f0be47d Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco.novy@sentry.io>
Date: Fri, 11 Apr 2025 12:23:49 +0200
Subject: [PATCH] fix(style): Ensure scrollbar is consistent

---
 src/components/sidebar/index.tsx         |  6 +++---
 src/components/sidebar/style.module.scss | 10 +---------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index e4920347b5a897..08188f92f2ec58 100644
--- a/src/components/sidebar/index.tsx
+++ b/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>
diff --git a/src/components/sidebar/style.module.scss b/src/components/sidebar/style.module.scss
index 9b7ad06b489dcb..c55c50e0a8eaa0 100644
--- a/src/components/sidebar/style.module.scss
+++ b/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;