Page MenuHomePhabricator

UI elements misaligned and misplaced
Closed, ResolvedPublic

Description

Some buttons on CX dashboard are having their labels misaligned with icons. This happened after 1.35.0-wmf.2 deployment. This is likely related to OOUI update to v0.35.1.

1.35.0-wmf.11.35.0-wmf.2
new-translation-button-1.35.0-wmf.1.png (65×746 px, 4 KB)
new-translation-button-1.35.0-wmf.2.png (66×746 px, 4 KB)

There is also some bad positioning on translation view. Regular link card (for adapted links) is displayed fine, but card which suggests which links to add is offset too much.

Regular link cardLink suggestion card
suggestion-link-card-1.35.0-wmf.1.png (170×367 px, 6 KB)
link-card-1.35.0-wmf.1.png (173×367 px, 7 KB)

Event Timeline

@Pginer-WMF Yes, this is connected as in a direct result of T220671: Replace `em` based sizing in favor of `px` based where applicable as the line-height in ems together with the top&bottom pixel values of buttons result in a lower than necessary box to fill the button box.
This could be addressed by

.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, 
.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
    line-height: 1.375em; // Equals to 22px 
}

Reason is difference in base font difference in UI of 14px and 16px and we thought to accommodate both worlds best possibly.

This is also affecting UploadWizard:

image.png (387×598 px, 28 KB)

One of the promises of T220671 was that we'd still be able to use limited font-scaling and while the padding might be a little smaller than expected it wouldn't be that notcieable. This is a much more noticeable problem.

Requiring downstream users to set the line-height of every scaled widget doesn't seem like a maintainable approach.

Bad positioning for link cards occurs due to a vertical-align: top; rule that exists inside ve.ui.LinearContext.less stylesheet (VisualEditor project). Regular cards seem to be displayed fine, because this rule is overwritten only for children of .ve.ui.CXLinkContextItem class. Since this problem extends to all other elements of .ve-ui-linearContextItem class (e.g. link suggestion card, template card, citation card - see photos - and so on) I suggest to apply a vertical-align: middle; rule for every children labeled with .ve-ui-linearContextItem class inside .ve-ui-cxDesktopContext elements (this currently stands true only for .ve.ui.CXLinkContextItem elements).

Screenshot 2020-05-17 at 22.53.40.png (140×416 px, 19 KB)

Screenshot 2020-05-17 at 22.52.47.png (91×416 px, 6 KB)

Change 596879 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] styles: Fix vertical align of context item titles inside cx tools, to align correctly with icons

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

Change 596880 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] styles: Fix line-height for button labels inside dashboard, to correctly align them with icons

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

This is also affecting UploadWizard:

image.png (387×598 px, 28 KB)

One of the promises of T220671 was that we'd still be able to use limited font-scaling and while the padding might be a little smaller than expected it wouldn't be that notcieable. This is a much more noticeable problem.

Well, for given (default) font-size, not for the bigger font-size of UploadWizard, as this has never been a standard OOUI button style, but an extension specific. Unlike mediawiki.ui.
Happy to care about a bigger button, if design team were to request that style.

Change 596879 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] styles: Fix vertical align of context item titles inside cx tools, to align correctly with icons

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

Change 596880 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] styles: Fix line-height for button labels inside dashboard, to correctly align them with icons

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