diff --git a/.changeset/grumpy-brooms-study.md b/.changeset/grumpy-brooms-study.md new file mode 100644 index 00000000000..89110fcf35b --- /dev/null +++ b/.changeset/grumpy-brooms-study.md @@ -0,0 +1,15 @@ +--- +'@astrojs/starlight': minor +--- + +Avoids the risk of layout shift when users expand and collapse sidebar groups + +This release can introduce additional padding to the site sidebar on certain devices to reserve space for scrollbars. You may wish to inspect your site sidebar visually when upgrading. + +If you would prefer to keep the previous styling, you can add the following custom CSS to your site: + +```css +.sidebar-pane { + scrollbar-gutter: auto; +} +``` diff --git a/packages/starlight/components/PageFrame.astro b/packages/starlight/components/PageFrame.astro index 5cfb1162049..a72a53086b5 100644 --- a/packages/starlight/components/PageFrame.astro +++ b/packages/starlight/components/PageFrame.astro @@ -56,6 +56,7 @@ const { hasSidebar } = Astro.locals.starlightRoute; width: 100%; background-color: var(--sl-color-black); overflow-y: auto; + scrollbar-gutter: stable; } :global([aria-expanded='true']) ~ .sidebar-pane {