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


Chrome 57:

Safari - the element has minimal misalignment:


Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 17 2017, 6:58 PM

@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

Etonkovidova added a comment.EditedJul 19 2017, 7:15 PM

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


The overall look:

Firefox seems to be ok too:

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

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!

@jmatazzoni, @Volker_E Done - the monobook issue with misaligned "What's this?" is now split into a separate ticket: T171919: (Safari only) RC filters - misaligned 'What's this?' element in monobook

Jdforrester-WMF closed this task as Resolved.Jul 28 2017, 4:12 PM
Jdforrester-WMF removed a project: Patch-For-Review.
Volker_E reopened this task as Open.Sep 6 2017, 6:12 PM

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

@Etonkovidova, did you check this? Should I Resolve?

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:

Chrome and Safari still display a slight misalignment:

Etonkovidova closed this task as Resolved.Sep 15 2017, 7:40 PM