| Pginer-WMF | |
| Apr 4 2018, 4:23 PM |
| F31875579: T191439-f77.png | |
| Jun 22 2020, 8:13 PM |
| F31875578: T191439-c83.png | |
| Jun 22 2020, 8:13 PM |
| F16721244: image.png | |
| Apr 5 2018, 6:37 PM |
| F16721237: image.png | |
| Apr 5 2018, 6:37 PM |
| F16673852: Screen Shot 2018-04-04 at 17.20.47.png | |
| Apr 4 2018, 4:23 PM |
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:
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).
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | SBisson | T162675 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions | |||
| Open | None | T168826 Styling adjustments for the New filters for edit review | |||
| Open | None | T191439 Help link on filter groups vertically misaligned |
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.
This is a cross-browser issue, which I couldn't find useful reasoning within a good amount of tracking down.
Firefox (current state):
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` } …
Doesn't seem to be the case anymore, now both Firefox and Chromium are off the same way here. Trying on https://en.wikipedia.beta.wmflabs.org/wiki/Special:RecentChanges?hidebots=1&hidecategorization=1&hideWikibase=1&limit=50&days=7&urlversion=2 I get:
Firefox 77:
