[6.x] Vertically center combobox tags

[JayGeorge]

More accurately vertically center combobox badges, using progressive enhancement.

The Issue

Currently, the badges have uneven space due to the way browsers trim text (or don't trim, rather).

Solution

We can fix that with progressive enhancement using the new text-box property, which snips the top and bottom of text. We need to apply padding when this happens, which is why I've wrapped the padding in an @supports rule.

Before

Look at the tags carefully and notice how the words are not perfectly in the middle of the badge, vertically.
It's difficult to unsee this—it almost looks like there is larger top padding than bottom padding.

After

The tag text is vertically centered

[jasonvarga]

Why are we applying this only to badges in the combobox? Wouldn't this happen to a badge used anywhere?

[JayGeorge]

The short answer is…

Trimming the text doesn't always look better, and for some reason, although it looks better with tags, it looks worse with badges, so I think it's more prudent to opt in to this behaviour carefully.

The long, 3-minute answer is…

Text.Trimming.Tags.mp4

[JayGeorge]

Whoops, I didn't mean to close this