Page MenuHomePhabricator

Button text is not vertically centered
Open, LowPublic

Description

Take a look at the button text in this picture:

buttons.png (243×1 px, 12 KB)

You can see that the text is not vertically centered; it's closer to the top border.

The cause of the problem is most likely the line-height, which is in this case equal to 1.28571429em. If we set the line-height to 1.5em (class: .mw-ui-button), the text will be displayed correctly:

ispravno.png (240×1 px, 11 KB)

Event Timeline

Similar to T235850. I'm not sure which project tag is correct, so I set Design. Correct me if I'm wrong.

Per discussion with @Acamicamacaraca, this happens everywhere: and in new and in old Vector.

Actually this regression is caused by one of the patches in T268241: Style language button and menu. Caused quite a few of issues on gadgets and pages over at ruWP.

Where are the affected buttons located? Please provide some URLs.

Where are the affected buttons located? Please provide some URLs.

Russian Wikipedia’s main page is using them and we had to add a style to remove min-height. Out of the more prominent places, ULS compact links button is affected.

Please provide links and follow https://www.mediawiki.org/wiki/How_to_report_a_bug (steps to reproduce) when reporting issues. Thanks.

Alright then.
Link: https://ru.wikipedia.org/wiki/Заглавная_страница
Where to look for misaligned buttons: the page header, prominent button ‘Создать статью’ (Create an article) and others
(present in every browser)

Previously this was also present in the footer of each page block, but we fixed it with CSS. The problem with the whole initial change is that the natural button height on a page is 30px, so 2px from min-height declaration get added to the bottom of the button. @Volker_E, is that description clear enough?

Yes, thanks @stjn. The bug filed is truly a regression and I was trying to pull out a bigger change (general style variables) in order to fix that smaller one, but that needs more time. Will go ahead with a quick-fix before next Tue.

LGoto added a subscriber: LGoto.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.

Reverting undiscussed silent close. Visual bug that still needs to be fixed.

This issue affects buttons using a <span> tag, but not those using a <button> tag. (Of course that's no help for content on wiki pages, but maybe it helps identify the issue.)

I noticed this with the "Jump to current event" button on https://wikitech.wikimedia.org/wiki/Deployments in top-right corner, the text of which jumps because of this bug, when the JS code loads and changes it from <span> to <button>.

The fact that centering works in <button> seems to be some built-in behavior of the tag, impossible to override using CSS. I can't find any documentation about it!

It looks like we could do the following to replicate it: (in supporting browsers)

.mw-ui-button {
    display: inline-flex;
    align-items: center;
}

…but that might mess up the layout of more complicated markup inside the button.