Added support for scrollbar-gutter

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4eacb97b.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.80dcb947.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">

src/assets/stylesheets/main/layout/_sidebar.scss

@@ -130,6 +130,7 @@
     // this reason, we disable scroll snapping until this is resolved (#1667).
     // scroll-snap-type: y mandatory;
     scrollbar-width: thin;
+    scrollbar-gutter: stable;
     scrollbar-color: var(--md-default-fg-color--lighter) transparent;
 
     // Sidebar scroll wrapper on hover
@@ -154,9 +155,6 @@
     }
   }
 
-  // Sidebar wrapper
-  &__inner {
-
   // Hack: the scrollbar is only visible when the sidebar's contents overflow,
   // which is nice, but leads to the problem where the chevrons of expandable
   // sections will jump by `4px` when the sidebar is shown. We wanted to fix
@@ -167,6 +165,14 @@
   // sidebar's content doesn't overflow. This hack is inspired and adapted
   // from Ayke van Laëthem's year old trick – see https://bit.ly/3Sb1qql
   @supports selector(::-webkit-scrollbar) {
+
+    // Sidebar scroll wrapper
+    &__scrollwrap {
+      scrollbar-gutter: auto;
+    }
+
+    // Sidebar wrapper
+    &__inner {
       padding-inline-end: calc(100% - #{px2rem(230px)});
     }
   }