Minor docs bug/issue: example code blocks have unnecessary 30px right-margin

[coliff]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Example on: https://getbootstrap.com/docs/5.3/forms/form-control/#example

screen: (red border added by me to highlight issue more clearly)

The code block has a 30px right-margin. I assume this is because the CSS rule used:

@media (min-width: 992px)
.highlight pre {
  margin-right: 1.875rem;
}

This CSS is also used for .bd-code-snippet where there is no preview above and the code doesn't want to get in the way of the copy to clipboard button so it makes sense there.

Perhaps a quick easy fix could be to overrule the above, just for the examples.

.bd-example-snippet .highlight pre {
  margin-right: 0;
}

If you agree I'd be happy to make a quick PR.

Reduced test cases

see above:

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.3.2

[julien-deramond]

Thanks for opening this issue @coliff
Yes, as you pointed out, it was done so the code isn't in the way of the copy-to-clipboard button for cases like the ones in the homepage.
I don't remember if there was an edge case really forcing us to have this extra margin everywhere.

If you agree I'd be happy to make a quick PR.

Yep, you can try something and we will together try to find all the edge cases. Thanks for that :)

FYI, it's a bit hidden, but you have https://getbootstrap.com/docs/5.3/docsref/ that is supposed to reference these edge cases.