Scrollbar is invisible in the Drawer

[ross-nordstrom]

Describe the bug

When the drawer has overflow, the scrollbar is hidden. You can see it on the docs page (https://shoelace.style/components/drawer) if you fill the drawer with enough content to need scroll.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://shoelace.style/components/drawer
2. Click Open Drawer from the first example (or any example)
3. Edit the text in the drawer and add a bunch to make it require scroll
4. Try to visually see an indication that the drawer can scroll
   🐞 There's no visible scrollbar

Demo

--

Screenshots

Browser / OS

• OS: Windows
• Browser: Chrome
• Browser version: 131.0.6778.86

Workaround

This has to do with shoelace's scrollbar-gutter logic, which I haven't fully grokked, but an ugly fix (because there's still a random blank, the color of the base page) is to add margin to the drawer to reveal the scrollbar hidden under the gutter:

html.sl-scroll-lock sl-drawer::part(body) {
    margin-right: var(--sl-scroll-lock-size);
}