Docs: fix overflow:auto horizontal scrollbars covering last line of code blocks

[patrickhlauke]

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/

[mdo]

This will need some changes at the least for the homepage hero which looks broken now. I recall there being another solution to this, but can't remember what it is just yet. For now, going to hold off on this.

[patrickhlauke]

Annoyingly, there's scrollbar-gutter but this does effectively the opposite of what I'd like (it only has an effect when browsers use classic scrollbars, and is ignored when they use overlay scrollbars ... in our case, we'd want extra padding/gutter when overaly scrollbars ARE used) https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

[patrickhlauke]

@mdo tweaked the padding values a bit, and nudged the clipboard button slightly ... better?

[XhmikosR]

Maybe we need .highlight pre margin-bottom: 0?

[patrickhlauke]

@XhmikosR that would then make it look a bit odd in browsers that don't do the overlay scrollbar, I'd say

Windows/Chrome

and arguably even look a bit unbalanced in browsers that DO do the overlay, once you're over it with the mouse

Windows/Firefox

[patrickhlauke]

personally, I think with the last few tweaks I did, this PR doesn't look too bad, even for the "hero" code on the homepage (while not vertically centered, it wasn't = perfectly anyway = even on the current getbootstrap.com)

Windows/Chrome

Windows/Firefox

[patrickhlauke]

@mdo made some futher tweaks, particularly by adding overflow: overlay which at least normalises how Chrome/Windows positions the scrollbar - it looks the same, but is not inside the content part, so bottom padding applies the same way to Chrome/Windows and other browsers with the thinner overlay scrollbar. I also special-cased the "hero" version in the masthead.

Before/after comparison in Chrome/Windows

Hero masthead (virtually the same)

---

Further down on the homepage - install / CDN

---

Before/after comparison in Firefox/Windows

Hero masthead (virtually the same)

---

Further down on the homepage - install / CDN

[patrickhlauke]

Before/after comparison Chrome/macOS

---

Before/after comparison Safari/macOS

[patrickhlauke]

related: this problem should be fixed directly in reboot, but that'd be a breaking change ... added a new issue for v6 #37909

[patrickhlauke]

@mdo any more thoughts on this?

[patrickhlauke]

randomly - https://github.com/orgs/community/discussions/49077

[mdo]

Looks great, couple tweaks that I'll commit and then merge. Thanks for all the detail and follow through here!

[patrickhlauke]

Cool cool. With the tweaks applied, here's what it looks like in Chrome/Win

and in Firefox/Win

(note that when zooming out heavily, the scrollbar still ends up covering more and more of the content...but I think this is good enough for now to at least avoid the most common scenario)