style: preserve sidebar height when toggling

[0916dhkim]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This PR makes the heights of the sidebar & the expand button fixed (100vh). This solves the layout shift.

Test Plan

2022-10-09.23-04-42.mp4

Go to a page where the sidebar height is greater than the main content height (an example is linked below). Try hiding/expanding the sidebar to make sure that there is no layout shift.

Test links

Deploy preview: https://deploy-preview-8195--docusaurus-2.netlify.app/tests/docs
Same page on prod: https://docusaurus.io/tests/docs

Related issues/PRs

Solves #4415

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	ae5721d
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6341e1515842f700081c7391
😎 Deploy Preview	https://deploy-preview-8195--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 87	🟢 98	🟢 100	🟢 100	🟠 80	Report
/docs/installation	🟠 75	🟢 100	🟢 100	🟢 100	🟢 90	Report

[slorber]

This seems to fix the issue indeed but introduce a new one.

If a doc has a small sidebar + small content, it still takes 100vh making it less clear that scrolling will reveal a footer

Before:

After:

That can be particularly confusing for vertical screens with a lot of vh IMHO 🤷‍♂️