Page MenuHomePhabricator

[wmf.14-minor] Misalignment of labels - RC filters
Closed, ResolvedPublic

Description

Since most likely there is a common reason for misalignment, I filed this ticket to list two different cases:

(1) (from comments on T199932) The labels are vertically centered and not aligned with the checkbox). The issue is present across all checked browsers:

When there is no filter description, the issue is somewhat more noticeable:

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 25 2018, 6:59 PM
Etonkovidova renamed this task from [wmf.14-minor] Misalignment of labels - RC filters and Structured discussion icons to [wmf.14-minor] Misalignment of labels - RC filters and Structured discussion board menu icons.Jul 25 2018, 7:00 PM
MMiller_WMF added a subscriber: MMiller_WMF.

@Volker_E -- @Etonkovidova noticed this issue and we think it could have something to do with upstream changes to OOUI. Could you look into this and tell us what you think?

SBisson renamed this task from [wmf.14-minor] Misalignment of labels - RC filters and Structured discussion board menu icons to [wmf.14-minor] Misalignment of labels - RC filters.Sep 21 2018, 5:31 PM
SBisson updated the task description. (Show Details)

@Etonkovidova The part about rcfilters still needs to be done.

Change 463960 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/core@master] RCFilters: improve checkbox alignment

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

kostajh added a subscriber: kostajh.Oct 2 2018, 2:26 PM

On a wide desktop view, the patch looks good:

But on a narrower view (I used half the width of my laptop monitor), the existing code (unpatched) seems to look better.

With patch on narrower width screen:

Without patch on narrower width screen:

Alignment for items without description (with the patch) still looks a little odd:

If we're unconcerned with alignment on narrower width screens and items without description then I'm OK with merging as is.

I titled my patch "improve alignment" for a reason... pretty much all situations are a little off. I'll make a second pass at trying to vertically align checkbox and text in the menus.

Change 463992 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/core@master] RCFilters: better vertical alignment of checkbox and text in menus

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

Change 463960 abandoned by Sbisson:
RCFilters: improve checkbox alignment

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

Change 463992 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/core@master] RCFilters: better vertical alignment of checkbox and text in menus

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

This patch removes the min-height from the menu items. It doesn't change much for filters with a description (main filters and tags) but the namespaces are a bit smaller.

Change 463992 merged by jenkins-bot:
[mediawiki/core@master] RCFilters: better vertical alignment of checkbox and text in menus

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

Etonkovidova closed this task as Resolved.Oct 3 2018, 4:27 PM

Checked in betalabs. @kostajh I think the position of labels on small screens (including mobile) looks quite decent.