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

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

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:

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.

Jpita removed a subscriber: Jpita.Feb 27 2020, 3:03 AM

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).

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:

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

santhosh closed this task as Resolved.Jun 10 2020, 4:26 AM