Announcement bar text being cut off

### 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.
- [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.](https://codesandbox.io/s/blissful-currying-nqeocf?file=/docusaurus.config.js&resolutionWidth=997&resolutionHeight=675) 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.