playground code blocks have double scoll bars

[JustinWebDev]

MDN URL

https://developer.mozilla.org/en-US/play

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

When a code block has overflowed text, a second vertical scroll bar appear; the original one never becomes active.
I see this in Firefox.

What did you expect to see?

Only one vertical scroll bar.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/list-style-position
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/list-style-position/index.md
• Last commit: mdn/content@b2833dd
• Document last modified: 2024-10-08T20:52:06.000Z

[caugner]

Reproducible with this Playground on Firefox. It looks like there is a scrollbar both on the <play-editor> itself, and the <div class="editor"> inside it.

[caugner]

@JustinWebDev Would you be interested in opening a PR? It might be sufficient to remove this overflow-y: scroll here:

yari/client/src/playground/index.scss

Line 202 in dcc8d35

overflow-y: scroll;

[JustinWebDev]

Sure @caugner how do I open a PR?

[jstrieb]

I can confirm that in Firefox on Windows, removing overflow-y: scroll seems to fix the double scroll bars without breaking anything else in the editor.

I have this fixed on a fork, and can make a PR if @JustinWebDev does not.

[caugner]

@JustinWebDev We would recommend you to take a look at this Getting started page, which also references our communication channels, especially our Discord server. 🙂

[JustinWebDev]

#12653

Thank you @caugner and @jstrieb ! It is probably a messy PR, but I'm glad to be encouraged to try it.