docusaurus
docusaurus copied to clipboard
Incorrect sidebar padding on firefox-based browsers
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.
- [x] I have tried the
npm run clearoryarn clearcommand. - [ ] I have tried
rm -rf node_modules yarn.lock package-lock.jsonand 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.
Reproducible demo
No response
Steps to reproduce
- open any firefox
- 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.
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.
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.
Are you sure about the Chromium behavior? Here's what I see on Chrome (which is consistent in Firefox and Safari too):
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?
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.