Announcement bar text being cut off

[andrewsemchism]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

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

Description

Announcement bar text is being cut off on some display sizes if the announcement is long enough.

View demo on codesandbox. In this example the bug will occur at a screen size of 997px.

Reproducible demo

https://codesandbox.io/s/blissful-currying-nqeocf?file=/docusaurus.config.js&resolutionWidth=997&resolutionHeight=675

Steps to reproduce

1. Add an announcement that is sufficiently long
2. Shrink the window size down and the issue should appear when the announcement occupies more than 1 line.

Expected behavior

The announcement bar should resize to fit the whole message.

Actual behavior

The announcement bar is too small to fit the whole message. It clips the message vertically.

Your environment

No response

Self-service

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

[Josh-Cena]

Could be a regression from https://github.com/facebook/docusaurus/pull/5430

[slorber]

Probably not a regression, this is what we had before:

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

[slorber]

Related to https://github.com/facebook/docusaurus/issues/8370, we should probably fix both issues at once ensuring an announcement bar with dynamic height is possible and does not mess up with the docs layout