Page MenuHomePhabricator

RC filters - 'What's this?' element is misaligned.
Closed, ResolvedPublic

Description

The following element is misaligned both in betalabs and wmf.30

<a class="oo-ui-buttonElement-button" role="button" tabindex="0" aria-disabled="false" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-image-progressive"></span><span class="oo-ui-labelElement-label">What's this?</span><span class="oo-ui-indicatorElement-indicator oo-ui-image-progressive"></span></a>

The most visible misalignment is in FF (FF 53 was tested).

Screen Shot 2017-05-17 at 11.43.57 AM.png (295×726 px, 59 KB)

Screen Shot 2017-05-17 at 11.44.12 AM.png (260×685 px, 48 KB)

Chrome 57:
Screen Shot 2017-05-17 at 11.37.42 AM.png (285×674 px, 55 KB)

Screen Shot 2017-05-17 at 11.37.56 AM.png (287×720 px, 60 KB)

Safari - the element has minimal misalignment:

Screen Shot 2017-05-17 at 11.46.35 AM.png (260×693 px, 55 KB)

Screen Shot 2017-05-17 at 11.46.47 AM.png (245×722 px, 60 KB)

Event Timeline

@Volker_E advice on this? The left part is a label, the right part is a frameless button, and I assume the alignment is off due to padding and line-height, which I can't immediately change.

My only idea here is to add a table layout whose cells are vertical-align:middle; ... ?

@Mooeypoo Both shouldn't feature a different computed height. Former 16px, latter 18px.
Vertical-align won't bring you much further as you'll consistently run into cross-browser rendering quirks.

There's currently no keyboard navigation via tab key possible?
Asking, as the border on .oo-ui-buttonElement-button is only there for tab focus, but by tabbing, currently you're actually tabbing out and hiding the overlay.
By setting it to 0 they are same height and I'd also not put too many line-height & vertical-align overrides on other selectors.

Change 357517 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Align "What's this" vertically

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

Checked the fix in betalabs - the label is aligned vertically now.
Both screenshots are for Chrome 59 (Safari looks fine too).

Screen Shot 2017-07-19 at 11.52.53 AM.png (126×740 px, 26 KB)

The overall look:
Screen Shot 2017-07-19 at 11.50.00 AM.png (567×750 px, 112 KB)

Firefox seems to be ok too:

Screen Shot 2017-07-19 at 11.59.41 AM.png (175×561 px, 29 KB)

However, monobook UI will need some adjustments (should be filed as a separate bug?) :

Screen Shot 2017-07-19 at 11.57.52 AM.png (282×687 px, 54 KB)

QA Recommendation: Product should weigh in

@Volker_E, do you want a new ticket for Monobook, as above? Or can you just fix it on this ticket?

@Volker_E, do you want a new ticket for Monobook, as above? Or can you just fix it on this ticket?

@jmatazzoni Sorry for the delayed reply. Let's open another bug for Monobook please, as it's a different beast, with other things (possibly) code-wise to consider. Thanks!

Not sure what happened here, patch hasn't been merged: https://gerrit.wikimedia.org/r/#/c/357517/?

Change 357517 merged by jenkins-bot:
[mediawiki/core@master] Align "What's this" vertically

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

The element has a different label: "How do these work?"

@Volker_E The fix looks best in FF:

Screen Shot 2017-09-15 at 12.26.28 PM.png (216×741 px, 49 KB)

Chrome and Safari still display a slight misalignment:

Screen Shot 2017-09-15 at 12.27.26 PM.png (186×787 px, 47 KB)

Screen Shot 2017-09-15 at 12.29.38 PM.png (342×797 px, 74 KB)