Skip to content

fix(sidebar): stop overlay scrollbar overlapping sidebar items #1990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
markdumay merged 1 commit into from
Jul 9, 2026
Merged

fix(sidebar): stop overlay scrollbar overlapping sidebar items #1990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion assets/scss/app-dart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down
4 changes: 3 additions & 1 deletion assets/scss/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down
14 changes: 14 additions & 0 deletions assets/scss/components/_sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading