Responsivity issue

[massoudmaboudi]

🐛 Bug Report

I tried the main website and also I built a new website using v2.docusaurus and I noticed when the responsibility issue (horizontal scrollbar) in my system which is MacBook Pro 13 inches.
Also, the navbar has a save issue with a different screen width which described below.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

(Write your steps here:)

Visit the below page:
https://v2.docusaurus.io/docs/markdown-features

Expected behavior

1. It should not have a horizontal scrollbar on that page in Macbook Pro 13 inches. (13.3-inch (2560 × 1600))
2. The Navbar row should perform better in the below the range of width: (997px < screen width < 1425px)

(Write what you thought would happen.)

Actual Behavior

1. It shows a horizontal scrollbar. (13.3-inch (2560 × 1600))
2. Navbar should show 2 rows properly in width: (997px < screen width < 1425px)

(Write what happened. Add screenshots, if applicable.)

Your Environment

• Docusaurus version used: 2.0.0-alpha.71
• Environment name and version: Chrome 87.0.4280.88 (Official Build) (arm64)
• Operating system and version (desktop or mobile): MacBook Pro 13 Inches (13.3-inch (2560 × 1600))

Reproducible Demo

[slorber]

Hi,

I've mitigated this issue by replacing the "unreleased" label with a construction icon

But we should find a solution.
The problem is that the breakpoint really depends on the site navbar content. Some sites will work with 1 line with 997px width.

Closing because:

• Responsive navbar is duplicate of Top nav could be pushed to the next row in some screen width #3820
• Scrollbar issue is duplicate of Codeblocks cause layout breaks at some screen resolutions #3870

[massoudmaboudi]

@slorber
I noticed the problem with the scrollbar is because of the CodeBlock. There is no issue for me in pages without a code block.
Also, When I set the width equal to a fixed size, it will remove the scrollbar. But When I set it to a percentage, still the problem persists.