[OUDS] Inconsistent content alignement in Badge component

[vprothais]

Prerequisites

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

Describe the issue

Depending on the screen used and its pixel density we can see some alignement issue with the content of the badge component. It could happen with numerical content or icon.

Since it seems to be linked to pixel density, maybe it is related to a rounded value somewhere.

Reduced test cases

Can be seen in the Badge documentation

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

macOS

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

Firefox

What version of Boosted are you using?

0.5.0

[vprothais]

I made a codepen to test some things here : https://codepen.io/vprothais/pen/myPpRZY It is not behaving as in our documentation. In OUDS Documentation, it seems to be fixed when we don't load Helvetica Neueu in the page. Maybe we will have to wait after adding the loading of the font through the CDN to check if it is still there

[vprothais]

Fixed by #3224