CodeBlock Horizontal Scroll Could Be Improved

[JaceHensley]

🐛 Bug Report

Currently the CodeBlock contents scroll when too long, but the way it looks could be improved. Right now

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Use CodeBlock with code that has long line length
2. See that the inner "well" is clipped instead of having it's content scrolled

Expected behavior

The CodeBlock's inner content should be scrolled not the container that holds it

Actual Behavior

The inner container itself is scrolled

Your Environment

• Docusaurus version used: v2.50
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): FF Dev 75
• Operating system and version (desktop or mobile): macos

Reproducible Demo

Current:

Proposed:

My proposal to fix this is to add another <div> inside the <code> element and add overflow: scroll; padding-bottom: 1rem and then on the <code> block add width: 100%; padding-bottom: 0;. This way the padding around the on the code is respected when scrolling it's contents

[lex111]

Hmm, on Linux there is no such issue, however, I did not want to complicate the markup of the code block with new (nested) HTML elements. Is this a really critical bug?

[JaceHensley]

No it's not critical, just nicer looking. Also that gif doesn't look like the same element, there's no outer darker container with the lighter inner container

[lex111]

It really should not be, this is a record from v2 website, which uses the latest version D2.

[JaceHensley]

Hmm odd, this is the link to our docs which I just redeployed with the latest alpha.

Maybe it's a different component? I noticed CodeBlock in the classic theme didn't use code/pre but that's what's rendered for me there

[lex111]

It looks like you are not using the latest version, as we have added a version name to the meta tag. For example, on website of v2:

<meta name="generator" content="Docusaurus v2.0.0-alpha.50">

In the source code by your link does not specify the version at all:

<meta name="generator" content="Docusaurus">

[JaceHensley]

Weird, I'll double check when I get back to my computer. Thanks!

[JaceHensley]

So I'm definitely on alpha 50 and this may be why it's not showing up in the meta tag https://github.com/facebook/docusaurus/blob/master/packages/docusaurus/src/client/templates/index.html.template.ejs#L6.

I was able to get it looking like your gifs if I use @docusaurus/theme-live-codeblock. So I think the base theme just needs to be updated to match the design of the live code block theme

[JaceHensley]

The new code block does still have the problem where the right edge, when scrolled, doesn't have padding (on macos on FF, Chrome, and Safari). I think this is due to just how CSS overflow/padding works. Which is one of the same problems I first had, but again not critical.

This could be improved by making the outer element (.mdxCodeBlock > div) the scrolling element with the padding and background color.

[lex111]

The new code block does still have the problem where the right edge, when scrolled, doesn't have padding (on macos on FF, Chrome, and Safari). I think this is due to just how CSS overflow/padding works. Which is one of the same problems I first had, but again not critical.

This has been fixed in #2533

So I'm definitely on alpha 50 and this may be why it's not showing up in the meta tag

This template applies to SPA, so when you are building your website, another template is used, in which the version of Docusaurus will be indicated in the meta generator tag.

[lex111]

@JaceHensley can I close this issue? You can see the website v2, it uses the latest version of D2, if there are no issues with displaying code blocks, then most likely the matter is in the local setup of your site.

[lex111]

In order to reduce staled issues, I am closing this issue, but feel free to open it again if you run into this again.