facebook/Docusaurus

Docs layout issues when announcementBar visible

Open

#8370 opened on Nov 24, 2022

View on GitHub
 (13 comments) (0 reactions) (0 assignees)JavaScript (12,167 stars) (1,074 forks)batch import
bugdifficulty: advancedhelp wanted

Description

Have you 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

image

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):

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.

Contributor guide

Tech stack
javascripttypescriptreactcss
Domain
documentationfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic CSSFamiliarity with Docusaurus layout
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the CSS layout of the DocSidebar component when announcementBar is visible. Look at the theme source code in packages/docusaurus theme classic/src/theme/DocSidebar/ and the announcementBar component. Check if there is an interplay between fixed positioning or height calculations. Also review the related issue #7815 for context on dynamic announcement bar height. The fix likely involves adjusting CSS to prevent overlapping and ensure the scrollbar fits properly.