Docs layout issues when announcementBar visible

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#reporting-new-issues).

### Prerequisites

- [X] I'm using the latest version of Docusaurus.
- [ ] I have tried the `npm run clear` or `yarn clear` command.
- [ ] I have tried `rm -rf node_modules yarn.lock package-lock.json` and re-installing packages.
- [ ] I have tried creating a repro with https://new.docusaurus.io.
- [ ] I have read the console error message carefully (if applicable).

### Description


When the announcementBar is visible, the docs sidebar has a weird layout issue

Page: https://docusaurus.io/tests/docs

Good URLs to reproduce (long sidebar collapsed - long content):
- https://docusaurus.io/docs/sidebar/items
- https://docusaurus.io/tests/docs/toc/toc-_-5/

Note: it's not because of the hideable sidebar feature, the issue is also there when there's no sidebar collapse button

Also related to https://github.com/facebook/docusaurus/issues/7815: the announcement bar height should probably be dynamic/flexible and layout should rather adapt gracefully to any size.

### Reproducible demo

_No response_

### Steps to reproduce

https://docusaurus.io/tests/docs

### Expected behavior

No weird layout with elements overlapping

The visible scrollbar takes the appropriate height.

### Actual behavior

Elements overlap and the scrollbar does not go up to the bottom (the scrollbar should touch the collapse button)

### Your environment

- Public source code:
- Public site URL:
- Docusaurus version used:
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):

### Self-service

- [ ] I'd be willing to fix this bug myself.