Docs sidebar layout issue when announcementBar is partially visible

[guardsofmagog]

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.
• [ ] 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.

[Josh-Cena]

Duplicate of https://github.com/facebook/docusaurus/issues/8370?

[guardsofmagog]

They are certainly related - I started looking into #8370 and it felt like that was more an issue around the sidebar ad when combined with the announcementBar (fully or partially visible). This is more specifically when the announcementBar is only partially visible - but I'm happy for the issues to be merged.

[Josh-Cena]

Ah, I get you. I'm pretty confident that I started to observe your issue quite a while ago, but only on Safari—but now I can reproduce it everywhere. I believe they have the same root cause though.

[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.

[Josh-Cena]

Good catch! If you think you could make the situation better, feel free to propose it in this issue or directly send a PR.

[msaini28r]

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

[slorber]

Going to close in favor of https://github.com/facebook/docusaurus/issues/8370

"announcement bar visible" vs "announcement bar partially visible" is almost the same thing. We'll try to solve all the announcement bar related layout issues at once