Docs sidebar layout issue when announcementBar is partially visible

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• 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 partially visible, the docs sidebar is incorrectly sized vertically. This is particularly noticeable when the sidebar collapse button is visible. Note that the behaviour does not occur when the announcementBar is fully visible or fully invisible.

Reproducible demo

No response

Steps to reproduce

1. Navigate to https://docusaurus.io/docs
2. Ensure announcementBar is visible (clear cache if required)
3. Resize browser window so scrollbar appears on sidebar
4. Scroll browser window so announcementBar is only partially visible

Expected behavior

Scrollbar on sidebar does not overlap collapse button

Actual behavior

Scrollbar on sidebar overlaps collapse button

Your environment

• Docusaurus v2.2.0
• Chrome v107 or Safari v15.6.1

Self-service

• I’d be willing to fix this bug myself.

[guardsofmagog]

It looks like docusaurus-announcement-bar-height is added to the bottom margin of the scrollable area of the sidebar - but only when the announcementBar is fully visible.

[msaini0r]

@guardsofmagog I would like to work on this issue if it is available.