Page MenuHomePhabricator

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


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

@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

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!

Not sure what happened here, patch hasn't been merged:

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

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: