Upon further inspection, this website suffers from this issue as well. But it may not be the exactly as I described it.
The overlap in this case occurs from the same issue. The property is set like so: min-width: 16px;
while the actual width is 24px. Now, there is something that I should note that I didn't see at first, but that is the padding. If the width of the button was 20, that would make sense, as the left and right padding is set to four, but instead it is 24 which means that the actual left and right padding is 8 if the issue is with that and not with the min-width
. What disproves my theory with it being a padding thing (if I have my facts straight) is that the padding is normal when adding enough characters to affect the size. As an example, I see the correct amount of space in between the span content and the border when I change the number to 100.
(Ignore the overlap for this as it is not an issue, just a side effect from having 100 notifications apparently LOL)
With this all in mind, I hope that the information has assisted you in finding the root cause of this.