fix(theme-classic): fix docs sidebar layout shifts when expanding categories

[slorber]

Motivation

Fix #5254

scrollbar-gutter property support has significantly increased since last time we checked: https://caniuse.com/mdn-css_properties_scrollbar-gutter

Even if support is not perfect, it can already be used as a progressive enhancement thanks to @supports mediaquery

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

preview layout shifts are fixed in all browsers supporting scrollbar-gutter

other browsers (Safari) should keep working the same

---

Other related issue: #7130

[Josh-Cena]

Shall we fix this in Infima instead?

[slorber]

Shall we fix this in Infima instead?

I don't think so, Infima's responsibility is to define the design for collapsible category items, not assume in which kind of container/parent they will be used and what padding should be applied in a given context (the current padding was already defined in Docusaurus btw).

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	e497af8
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6250099301a18d00087c30d7
😎 Deploy Preview	https://deploy-preview-7134--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	59
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7134--docusaurus-2.netlify.app/

[github-actions]

Size Change: +100 B (0%)

Total Size: 806 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	105 kB	+100 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	49.9 kB
website/build/assets/js/main.********.js	612 kB
website/build/index.html	38.6 kB

_{compressed-size-action}

[Josh-Cena]

I was mainly pointing to things like thin-scrollbar. Maybe we should have another utility class for scrollbar-gutter: stable;. But this looks fine as well.

[Josh-Cena]

Very cool!

[slorber]

I was mainly pointing to things like thin-scrollbar. Maybe we should have another utility class for scrollbar-gutter: stable;. But this looks fine as well.

I don't know, there are other values like stable both-edges that can be useful in certain contexts. For now, it's probably preferable to keep this here and see if there's value creating an utility class later

[slorber]

Seems to be working fine in Chrome, Edge, Firefox.

Safari remains the last major desktop browser not supporting this, but they have been implementing a lot of new cool things recently so I'm optimist to see this supported soon