fix(v2): fit footer in viewport when content area is too small #4311
Conversation
| } | ||
| <> | ||
| <Head> | ||
| <style>{`.main-wrapper { display: flex; }`}</style> |
There was a problem hiding this comment.
Since we only have one CSS bundle for entire site, all the styles defined in the components become globally available. And therefore, I had to add this rule directly in the component via the style tag (because it should only be applied to docs). I don't like this approach, but are there any better options?
There was a problem hiding this comment.
Why not add an additional, custom className to the Docs wrapper and just style it via this new selector (for example main-docs-wrapper)?
There was a problem hiding this comment.
That's right, I completely forgot about this wonderful prop, thanks for the tip!
|
[V1] Deploy preview success Built with commit ee839f5 |
|
Size Change: +9 B (0%) Total Size: 532 kB ℹ️ View Unchanged
|
|
Deploy preview for docusaurus-2 ready! Built with commit ee839f5 |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4311--docusaurus-2.netlify.app/classic/ |
|
LGTM 👍 |
Motivation
Remove the minimum doc sidebar height equal to the viewport (i.e. 100vh) to make visible footer in it if there is very small content on any doc page (see screenshots below).
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Before:
The footer is not visible in viewport, although there is very little doc content.
After:
The footer is visible on screen with small content area (no need to scroll the page for this).
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.)