Skip to content

fixed codeblocks layout with long code#4235

Closed
rahgurung wants to merge 1 commit intofacebook:masterfrom
rahgurung:codeblock-ui-fix
Closed

fixed codeblocks layout with long code#4235
rahgurung wants to merge 1 commit intofacebook:masterfrom
rahgurung:codeblock-ui-fix

Conversation

@rahgurung
Copy link
Copy Markdown

Motivation

Fixes #3870

I found a workaround to fix the layout issue. First of all, the issue was coming in case of code with long code only. I tried fixing the width to 1px and adding the style to the parent element for fixing the dark/light mode and it fixed the issue.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

It works for manually for all the pages which were broken otherwise for all versions like:
https://v2.docusaurus.io/docs/2.0.0-alpha.69/markdown-features/
https://v2.docusaurus.io/docs/next/markdown-features/react

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 17, 2021
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 17, 2021

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 17, 2021

Size Change: +14 B (0%)

Total Size: 158 kB

ℹ️ View Unchanged
Filename Size Change
website/build/assets/css/styles.********.css 17.6 kB 0 B
website/build/assets/js/main.********.js 111 kB +15 B (0%)
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 -1 B (0%)

compressed-size-action

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 17, 2021

Deploy preview for docusaurus-2 ready!

Built without sensitive environment variables with commit 1bf1966

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

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 17, 2021

⚡️ Lighthouse report for the changes in this PR:

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

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

@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Feb 17, 2021

This seems to work on https://deploy-preview-4235--docusaurus-2.netlify.app/classic/docs/2.0.0-alpha.69/markdown-features/

However, can you explain the solution? It's not clear to me why it does work, and if it's a good solution or not

@lex111
Copy link
Copy Markdown
Contributor

lex111 commented Feb 17, 2021

Unfortunately, this is not easy to fix. At the moment this PR will break line highlighting in scrollable code blocks.

ezgif com-gif-maker (17)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Codeblocks cause layout breaks at some screen resolutions

4 participants