Docs: Add top/bottom margin to highlighted code samples

[patrickhlauke]

provide more space to avoid having the "Copy" button overlap code sample content

Preview: https://deploy-preview-31036--twbs-bootstrap.netlify.app/

Before:

After:

[patrickhlauke]

admittedly looks a bit "spacey" for code sample one-liners, but works well for content that is very long/wide like in the second example (where otherwise you get the unsightly overlap of "Copy")

[ffoodd]

I'm definetely for this. If spacing doesn't look good, might we consider adding a background-color?

[patrickhlauke]

there is a subtle background color already. what i meant more was that it looks odd being top-right in an otherwise one-liner box (where currently for single-line code blocks like that, the "Copy" looks inline with the single line of code)

[patrickhlauke]

or did you mean a background on the non-hovered/non-focused "Copy" button?

[ffoodd]

Indeed, a background for the copy button: to make it stand out a bit, and prevent it from being unreadable.

Note sure it'd be better than spacing though.

[patrickhlauke]

while not obvious anymore on the new v5 homepage (as the code samples have been prefixed with a comment that's short and doesn't creep to the right-hand side), the fundamental problem is still there in places, e.g. https://v5.getbootstrap.com/docs/5.0/forms/form-control/#sizing

[mdo]

On the Icons site, I've changed the button style vs adding more vertical margin/padding. See https://icons.getbootstrap.com/icons/alarm/ for an example. I'd be more in favor of that vs the added page height.

[patrickhlauke]

@mdo it will still overlap in those situations...but will look prettier. up to you.

[patrickhlauke]

@mdo taking the example for v5 from #31036 (comment) and grafting in the styles for the clipboard buttons from https://icons.getbootstrap.com/icons/alarm/ still results in the buttons then covering/overlapping the content. true, it's prettier. but functionally still the same...they get in the way.

how about combining the two approaches? nicer styles for the clipboard buttons and more padding?

[mdo]

how about combining the two approaches? nicer styles for the clipboard buttons and more padding?

Let's try it out!

[patrickhlauke]

added new styles for the clipboard button, and tweaked both the size/position of the button and my added margin ... to some middle-of-the-road compromise. still overlaps content a bit if the first line fills the whole width, but at least doesn't look broken now. and the slightly reduced size of the clipboard button feels good, subjectively.

[patrickhlauke]

not urgent, but just to clear the deck of relatively simple little things... ping @mdo @twbs/css-review

[XhmikosR]

@patrickhlauke can you please backport this in v4-dev?

[patrickhlauke]

@XhmikosR done #31706