I am pretty sure this is caused by the fix for T115179. However, before it, the label looked off in the other direction in the demo. The root cause is that the demo and the real UI use different font sizes (T97631).

I tried putting a different font size on the wrapper and it was still off.

WITH the current demo-to-working font-size difference in place...

span.oo-ui-dropdownWidget-handle should have a line-height: of 1.275; .

The 3 children spans of the above (a display:inline-block) do not handle line-height well since they are not block level elements by nature; removing the line-height attributes from them should not change anything (only adding the above will).

Note: Once the two baseline settings become aligned (or at least sane?), this "fix" will make things worse not better.

I investigated this a bit more and I was actually wrong, @GOIII was a lot closer.

In T117729#1784673, @GOIII wrote:

span.oo-ui-dropdownWidget-handle should have a line-height: of 1.275em; .

This does fix this issue, but I'm not sure if your explanation is correct, and it doesn't seem to make anything worse. It looks like the weird effect is caused by inheriting line-height: 1.6em from .mw-body-content in Vector.

Change 251457 had a related patch set uploaded (by Bartosz Dziewoński):
MediaWiki theme: Specify 'line-height' for DropdownWidget's handle

https://gerrit.wikimedia.org/r/251457

In T117729#1787470, @matmarex wrote:

This does fix this issue, but I'm not sure if your explanation is correct, and it doesn't seem to make anything worse. It looks like the weird effect is caused by inheriting line-height: 1.6em from .mw-body-content in Vector.

First of all - Line height should never be in relative or fixed values: line-height: 1.6 is inherited from .mw-body-content in Vector (no em).

Second. as far as I can tell, somebody has "locked" themselves into a never-ending loop of adjustments by fixing height: (not //line-height://) values in some of the demo examples while letting children/dependents inherit/calculate this value from parent elements in others. The latter is the best way to insure uniformity not only across demo examples but browsers as well.

Copying that here from patch comment as well:
I agree with comment @GOIII, that line-height shouldn't be set with a value unit, it's best to set it relatively.

Right, sorry, I updated my patch to use just 1.275 (which also works). OOjs UI code almost exclusively uses 'em' values for 'line-height', though. Patches are welcome.

In T117729#1790292, @Volker_E wrote:

Copying that here from patch comment as well:
I agree with comment @GOIII, that line-height shouldn't be set with a value unit, it's best to set it relatively.

Its my fault - I see now that in my original post I had used ems. Corrected.

Change 251457 merged by jenkins-bot:
MediaWiki theme: Specify 'line-height' for DropdownWidget's handle

https://gerrit.wikimedia.org/r/251457