Page MenuHomePhabricator

Help link on filter groups vertically misaligned
Open, Needs TriagePublic


Some filter groups such as "Contribution quality predictions" have a help link next to it ("How do these work?"). Both texts are supposed to sit on the same baseline, but due to some regression it seems that is no longer the case and they require some adjustment in their vertical alignment.

the issue is illustrated below:

Screen Shot 2018-04-04 at 17.20.47.png (788×705 px, 151 KB)

In addition the horizontal separation between them seems too big, and we can adjust it to 12px (or approximate unit in Ems if using them is required).

Event Timeline

I closed the previously filed task T165627: RC filters - 'What's this?' element is misaligned. as Resolved, although some adjustments are still needed. Thus, this issue is a long-standing one, not related to recent OOUI changes.

Volker_E renamed this task from Help link on filter groups vertically missaligned to Help link on filter groups vertically misaligned.Apr 5 2018, 6:18 PM

This is a cross-browser issue, which I couldn't find useful reasoning within a good amount of tracking down.
Firefox (current state):

image.png (234×1 px, 43 KB)

image.png (228×1 px, 41 KB)

There are minor calculations off in both rendering engines, mostly around display and line-height properties, but even with them set explicitly and consistently across the DOM elements there remains a 2px difference.

In Chrome/Blink .mw-rcfilters-ui-filterMenuSectionOptionWidget-whatsThisButton receives a computed height of 17px(!) although all its children are 15px.
There has been a similar issue in OOUI buttons that could be driven back by me to the generic font-family value sans-serif. This doesn't seem to be the reason here, though.

I need to leave this as is for now.

For completion, here the overrides I've put into mw.rcfilters.ui.FilterMenuSectionOptionWidget

.mw-rcfilters-ui-filterMenuSectionOptionWidget {
	&-header-title.oo-ui-labelElement-label {
		color: @colorGray5;
		display: block;
		float: left;

	&-whatsThisButton {
		margin-top: -2px; // HACK: Magic number, works only when `&-header-title` is set to `block`, see T191439
		margin-left: 1.5em;
		line-height: 1; // HACK: Internally browser should calculate height to ≈`15px`
Volker_E changed the task status from Open to Stalled.Apr 6 2018, 10:37 PM

Stalled until new idea arises on how to best address cross-browser inconsistency.

Aklapper changed the task status from Stalled to Open.Jun 22 2020, 8:13 PM
Aklapper edited projects, added CSS; removed User-notice-collaboration.
Aklapper removed subscribers: Nirzar, jmatazzoni.

This is a cross-browser issue, which I couldn't find useful reasoning within a good amount of tracking down.

Doesn't seem to be the case anymore, now both Firefox and Chromium are off the same way here. Trying on I get:

Firefox 77:

T191439-f77.png (645×782 px, 89 KB)

Chromium 83:
T191439-c83.png (629×816 px, 85 KB)