The live js editor can go up to 2 levels of scrollbars

[JSmithOner]

When using the javascript editor with long code and long console outputs, the overflows are a bit messy, as shown on the picture.

I was thinking of editing the style and perhaps html to make it more clear and most important get rid of the first level scrollbars ( the outer ones ). Only problem is I can't find the code in the repo. If anyone could tell me if I can make an edit of this editor and then after make a pull request. Thanks in advance.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

[wbamberg]

@JSmithOner , I don't see the outer scrollbar in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map , do you have steps to reproduce for it?

[wbamberg]

(This does happen sometimes though, we have an issue for it at mdn/bob#730 . So I'm not suggesting it's not a problem, just that I don't see it in this particular case.)

[JSmithOner]

@wbamberg Thank you for your answer, I often use this editor to quickly test algorithms so I guess the problem don't appear with the mdn examples. Also I've been trying to clone the repo to fix this bug but looks like the editor is integrated via a sort of embedded component. Didn't took time to understand how it worked but couldn't reproduce the issue locally. The error don't occur locally because the editor fits the window's width also I guess the editor on the web is wrapped inside a div that allows overflow and maybe don't have a max width that allows container to fits it's parent div. What do you think?

[wbamberg]

The JS examples get built into an editor by the mdn/bob package. This creates an editor in one of three different heights: small, medium, large, depending on the length of the example in lines. The editors get published as standalone pages. For example, here's the example for Array.slice(), which is a large example: https://interactive-examples.mdn.mozilla.net/pages/js/string-slice.html .

To embed them in MDN pages we use a macro, {{EmbedLiveSample}}. That macro creates an iframe whose contents is the standalone page that the example is in.

Because it's an iframe, we need to say how big we want the iframe to be. So the macro has to pass an extra argument if it wants to embed a small or large example (medium size is the default). So you'll see that in the page for Array.slice() we pass "taller" into the macro. So we get an iframe that fits. If we forget to do that we either get some extra whitespace at the bottom (the iframe is too big) or a vertical outer scrollbar (the iframe is too small).

So that's AFAIK roughly how sizing works for interactive examples. It's a bit fragile but can be made to work OK. I'm not sure how it relates to your issue (or if there even is an issue here for MDN at all?).

[NiedziolkaMichal]

This is now fixed. A lot of content in the JS example looks like this:

Thanks a lot for reporting this issue.