Skip to content

fix(v2): avoid horizontal scrolling when long lines of code#4241

Merged
slorber merged 3 commits intomasterfrom
lex111/iss3870
Feb 18, 2021
Merged

fix(v2): avoid horizontal scrolling when long lines of code#4241
slorber merged 3 commits intomasterfrom
lex111/iss3870

Conversation

@lex111
Copy link
Copy Markdown
Contributor

@lex111 lex111 commented Feb 18, 2021

Motivation

Fixes #3870
Closes #4235

Because the most correct solution in our case is to set the maximum width for the column with main content on desktop (except extra large screens).

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Check it out Using React page on preview site as per instructions in #3870.

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: bug fix This PR fixes a bug in a past release. label Feb 18, 2021
@lex111 lex111 requested a review from slorber as a code owner February 18, 2021 01:55
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 18, 2021
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 18, 2021

[V1] Deploy preview success

Built with commit 9d6a696

https://deploy-preview-4241--docusaurus-1.netlify.app

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 18, 2021

Size Change: +8 B (0%)

Total Size: 158 kB

ℹ️ View Unchanged
Filename Size Change
website/build/assets/css/styles.********.css 17.6 kB +8 B (0%)
website/build/assets/js/main.********.js 111 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus/index.html 21.7 kB 0 B
website/build/docs/introduction/index.html 180 B 0 B
website/build/index.html 6.95 kB 0 B

compressed-size-action

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 18, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 9d6a696

https://deploy-preview-4241--docusaurus-2.netlify.app

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 18, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟢 Performance 92
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4241--docusaurus-2.netlify.app/classic/

@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Feb 18, 2021

that seems to work but I think something simpler is possible: add max-width: calc(100% - var(--doc-sidebar-width)); to .docMainContainer

@lex111
Copy link
Copy Markdown
Contributor Author

lex111 commented Feb 18, 2021

@slorber thanks, we can really go this way.

@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Feb 18, 2021

still fails for 1350px width on this page https://deploy-preview-4241--docusaurus-2.netlify.app/classic/docs/markdown-features

Will edit the pr and apply this CSS to larger breakpoints as well and then merge

@slorber slorber merged commit 936d662 into master Feb 18, 2021
@lex111 lex111 deleted the lex111/iss3870 branch February 19, 2021 18:20
@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Codeblocks cause layout breaks at some screen resolutions

3 participants