fix(NcCounterBubble): make it perfectly aligned circle

[ShGKme]

☑️ Resolves

• With 1 digit in NcUserBubble the digit is not exactly in the middle
• The problem is that 1em line height is bigger than actual digit height
• Usually it is not a problem, but with a circle it looks better than it's perfectly in the middle
• Using cap fixes the problem
• cap is not well supported, so using 1em as a fallback

🖼️ Screenshots

🏚️ Before	🏡 After
Top padding is bigger than the bottom	Padding is almost equal

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[susnux]

Just to note: 1cap is the height of the capital letters. But digits often have an interleave (they are slightly bigger).

Can we not just make it min-width min-height 1em and center it? Then it is always perfect?

[susnux]

works, but see comment :)

[ShGKme]

and center it?

How?

[ShGKme]

To center it, you need to know the size and the position of the character relative to the container

[susnux]

/backport to next