docusaurus icon indicating copy to clipboard operation
docusaurus copied to clipboard

Incorrect sidebar padding on firefox-based browsers

Open AngleSideAngle opened this issue 7 months ago • 1 comments

Have you 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.
  • [ ] 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.
  • [ ] I have read the console error message carefully (if applicable).

Description

When viewing docusaurus docs on a firefox-based browser, the there is no right padding on the sidebar buttons. Attached is a screenshot of the latest version of firefox viewing a new code sandbox from new.docusaurus.io with no modifications.

Image

Reproducible demo

No response

Steps to reproduce

  1. open any firefox
  2. navigate to https://docusaurus.io/docs or any other website that uses docusaurus

Expected behavior

The sidebar buttons should have equal padding on all sides. Attached is a screenshot from the latest version of epiphany to demonstrate. I was able to reproduce this behavior on chromium as well.

Image

Actual behavior

The sidebar buttons do not have proper padding on the right side. Attached is a screenshot from the latest version of firefox. I was able to reproduce this behavior on librewolf and zen.

Image

Your environment

  • Firefox 137, Librewolf 137
  • NixOS 24.11 latest commit
  • Full viewport size

Self-service

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

AngleSideAngle avatar Apr 26 '25 20:04 AngleSideAngle

Are you sure about the Chromium behavior? Here's what I see on Chrome (which is consistent in Firefox and Safari too):

Image

That padding is there to prevent layout shift when the scroll bar appears. If the browser supports scrollbar-gutter, then we use the native stable scrollbar gutter instead. If the appearance of a scrollbar does not cause layout shift anyway (such as on macOS, where the scrollbar is floating), then we do not add spacing at all.

Do Firefox and Epiphany render scrollbars differently? What does it look like when you expand a few categories such that a scrollbar appears?

Josh-Cena avatar May 29 '25 13:05 Josh-Cena

I don't see this behavior in Firefox.

Considering the non-usual env (Firefox 137 on NixOS), I'd close as a possible bug in that specific Firefox version. We can reopen if we get more info.

slorber avatar Jul 31 '25 11:07 slorber