diff --git a/assets/scss/app-dart.scss b/assets/scss/app-dart.scss
index cecb3cf9..8386a139 100644
--- a/assets/scss/app-dart.scss
+++ b/assets/scss/app-dart.scss
@@ -20,6 +20,9 @@
 // Include dark mode overrides
 @import "common/variables-dark.scss";
 
+// Scrollbar mixin — imported before the components so they can @include it
+@import "common/scrollbar.scss";
+
 // Import Hinode theme styles
 @import "components/abbr.scss";
 @import "components/alert.scss";
@@ -51,7 +54,6 @@
 @import "components/lightbox.scss";
 @import "common/animation.scss";
 @import "common/masonry.scss";
-@import "common/scrollbar.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
diff --git a/assets/scss/app.scss b/assets/scss/app.scss
index 5085f1ed..8741c2d0 100644
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -18,6 +18,9 @@
 // Include dark mode overrides
 @import "common/variables-dark.scss";
 
+// Scrollbar mixin — imported before the components so they can @include it
+@import "common/scrollbar.scss";
+
 // Import Hinode theme styles
 @import "components/abbr.scss";
 @import "components/alert.scss";
@@ -49,7 +52,6 @@
 @import "components/lightbox.scss";
 @import "common/animation.scss";
 @import "common/masonry.scss";
-@import "common/scrollbar.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";
diff --git a/assets/scss/components/_sidebar.scss b/assets/scss/components/_sidebar.scss
index 16ab11f2..a846618e 100644
--- a/assets/scss/components/_sidebar.scss
+++ b/assets/scss/components/_sidebar.scss
@@ -44,6 +44,20 @@ html.sidebar-pre-collapsed .sidebar-collapsible .sidebar-brand {
     max-height: calc(100vh - var(--navbar-offset));
     overflow-y: auto;
     scrollbar-gutter: stable;
+
+    // `scrollbar-gutter: stable` reserves the gutter only for classic
+    // scrollbars. On macOS, Chrome/Safari default to overlay scrollbars,
+    // which take no layout space — so the gutter collapses to 0 and the bar
+    // floats over the sidebar content (the group chevrons). Styling the
+    // scrollbar opts the element out of overlay mode, giving a non-overlay bar
+    // that reserves width and sits in the stable gutter, consistent across
+    // browsers. A muted thumb on a transparent track keeps it subtle and
+    // light/dark aware.
+    @include scrollbar(
+        $foreground-color: var(--bs-border-color),
+        $background-color: transparent,
+        $size: 8px
+    );
 }
 
 .sidebar-item {