Fix docs overlapping navigation

[chadfawcett]

Summary

NOTE: This is a work in progress as I need some clarification on some of the docs pages (See below).

There are some comments in the markdown syntax highlighter that are longer than 80 characters. This forces the documentation container to over lap the side navigation. By manually wrapping the comments at 80 characters, it resolves this issue.

Before:

There were a couple of pages that I was unsure of how you'd like the lines to be displayed. For example, the Using with webpack page has configs that look like the following:

"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/fileTransformer.js"

I feel like in this case, rather than breaking the line apart, the code block should scroll horizontally like GitHub. Similarly this would be a better fit on the Troubleshooting page where the following example error is shown:

- Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.`

If you agree, I'd be happy to work on that as well.

PS: After starting the docs with yarn start there was some file changes that happened on 2a4eb38 which I committed separately incase I need to revert it.

Test plan

After:

[chadfawcett]

I can also look into getting prettier to handle the 80 character wrap in markdown syntax highlighting if that would be beneficial.

[SimenB]

Related: prettier/prettier#2943 (unreleased)

[chadfawcett]

Thanks @SimenB, I saw that the PR was merged awhile ago. I was going to dive deeper into it, I didn't realize it wasn't released yet.

[SimenB]

If you agree, I'd be happy to work on that as well.

I agree it makes sense for actual code to not get wrapped, and rather scroll horizontally 🙂

[chadfawcett]

@rogeliog Sorry for the delay, I'll try to get this PR finished up this weekend.

[cpojer]

Ping, are you still working on this?

[chadfawcett]

Yes, my apologies for the delay.

[chadfawcett]

So the Using with webpack issue was resolves with the update to Prettier in #4853.

As for the issue in Troubleshooting, it looks like it's an issue upstream in docusaurus, which has a broken link to the repo so I'm not sure I can contribute to that.

I could fix it by adding to static/css/custom.css but would prefer the fix to come from upstream.

This PR can either be merged in as is to fix the word wraps and leave the other issue to the upstream dependency, or I can write some overriding styles until the dependency is fixed. Please let me know what you would like.

[codecov-io]

Codecov Report

Merging #4781 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #4781   +/-   ##
======================================
  Coverage    59.9%   59.9%           
======================================
  Files         197     197           
  Lines        6549    6549           
  Branches        4       4           
======================================
  Hits         3923    3923           
  Misses       2626    2626

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 14957ab...b8060f2. Read the comment docs.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.