Description
Some browsers (Firefox in recent builds on Windows, and browsers on macOS) have changed how they handles scrollbars when a container uses overflow: auto. Scrollbars don't show at all at first. When hovering over the container, a thin sliver of a scrollbar appears. When hovering over the thin scrollbar, it expands to a full fat scrollbar.
Unfortunately, the browsers then don't leave any extra space for the full fat scrollbar to appear. As a result, currently horizontal scrollbars cover the last line of code in our documentation code blocks.
Chrome/macOS
Fixefox/Windows
With this fix, we just add some extra top/bottom padding to code blocks, leaving enough space for the scrollbars that then appear.
Only downside is that in some browsers (e.g. Chrome/Windows) those code blocks now have slightly more unnecessary padding (since these browsers already reserve space for the always visible scrollbar)
Chrome/Windows
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Checklist
-
I have read the contributing guidelines -
My code follows the code style of the project (using npm run lint) -
My change introduces changes to the documentation -
I have updated the documentation accordingly -
I have added tests to cover my changes -
All new and existing tests passed
Live previews
https://deploy-preview-37694--twbs-bootstrap.netlify.app/docs/5.2/getting-started/introduction/