Make navs next to content take up full width

[SimenB]

🚀 Feature

Make the left and right hand navs take up the outer width to facilitate easier scrolling

Motivation

When scrolling, you have to have the mouse above the ToC to scroll it instead of the page's content. On the right hand, it's easy to have the cursor too far to the right, scrolling the document instead of the content

Pitch

I'm unable to take a screenshot of the pointer, but it's easy to move it too far to the right if the word in the ToC is long enough, e.g.:

If the pointer is a smidge to the right of "modulePathIgnorePatterns [array]" then I scroll the page's content

[endiliey]

To sum it up, for example
https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

Expected behavior when scrolling at point
(1) -> scroll page content
(2) and (3) -> scroll sidebar
(4) and (5) -> scroll TOC

Current behavior when scrolling at point
(1) and (2) and (5) -> scroll page content
(3) -> scroll sidebar
(4) -> scroll TOC

Is this correct @SimenB ?

[SimenB]

Yup, perfect!

[SimenB]

The left part is fine, but because of the alignment of the right one it's easy to have the cursor too far to the right

[fiennyangeln]

Hi I would like to work on this

[yangshun]

@fiennyangeln it's yours!

I've added an "issue: claimed" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

I'll check in with you periodically so that we can keep the task updated with the progress.

[JoelMarcey]

@fiennyangeln Excellent! Thank you so much.

We've added an issue: claimed label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Of course, I'll check in with you so that we can keep the task updated with the progress. 😄

[JoelMarcey]

Ha ha ha @yangshun and I were thinking the same thing 🤣

[SimenB]

Another thing I noticed that's semi related is that while the left hand navigation gets a scrollbar, the right one does not. Intentional?

[fiennyangeln]

Hmm, do you think its ok if i add another CSS Class to modify the change since i realize most of the css class used by the page like docsNavContainer and mainContainer are used by other page and my change (set flex:1 to the docsNavContainer and onPageNav, remove max-width:1400px and margin:0 auto in the docMainWrapper) will affect other page like Blog ? @JoelMarcey @yangshun

[JoelMarcey]

Hi @fiennyangeln Would adding anything to our custom.css file help you here? https://github.com/facebook/Docusaurus/blob/master/website/static/css/custom.css