Codeblocks cause layout breaks at some screen resolutions

[alexk111]

🐛 Bug Report

When a page contains a code block with long lines (scrollable horizontally) it breaks the layout at some screen resolutions.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Open a tab in Chrome
2. Open DevTools in it
3. Toggle Device Toolbar
4. Set width = 1349 (got that value from a laptop with 1366x768 screen resolution)
5. Open https://v2.docusaurus.io/docs/2.0.0-alpha.69/markdown-features/
6. The layout issue happens (check the actual behavior below for details)
7. Remove all the three horizontally scrollable codeblocks (using DevTools > Elements)
8. The layout issue is gone and everything looks good

Expected behavior

The layout is ok.

Actual Behavior

The layout is not ok:

1. Page width > screen width (scrollable on x axis)
2. Sidebar collapse button moves up when scrolling the page down

Your Environment

• Docusaurus version used: 2.0.0-alpha.69
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome/Opera/FF
• Operating system and version (desktop or mobile): Desktop

[slorber]

agree, there's something wrong in our layout here and the content should not be larger when there are code blocks

[rahgurung]

This issue only happens when a line is too long in code, in case of small width code, this if fine.