Floating labels: Fix max-width and background-color

[louismaximepiton]

Description

Add a max-width to label inside Floating labels. Reverting and upgrading a change inside #38313.

Motivation & Context

Issue described in #39080.

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-39720--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels

Related issues

Closes #39080.
Might supersede #39480.

[mdo]

<3

[julien-deramond]

Thanks @louismaximepiton for this fix that LGTM!

I've added in this PR a new visual test because it's always challenging to gather all the different use cases along the way: 8a38e2b. We'll be able to add some other use cases if we can find other issues in the future :)

Locally:

npm run dist
# Then navigate to `file:///Users/xxxxx/twbs/bootstrap/js/tests/visual/floating-label.html`

Please note that it would be probably better at some point to do that with Storybook.

Based on these examples, the only minor improvement could be related to the following, where there's a small overlap between the long label and the invalid icon. But this could be tackled in another PR IMO:

@mdo, are you OK with this approach? If so, I'll merge it as is for a v5.3.4.

[mdo]

Sounds good to me!