www.wikipedia.org – “Media Viewer” text is misaligned in "Preferances>Files" page

[softvision-oana-arbuzov]

URL: https://en.m.wikivoyage.org/wiki/Special:Preferences/files Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-04-26) Operating System: Android 6.0.1 Problem type: Something else - I'll add details below

Prerequisites:

1. Disconnect from VPN, in order to create account.
2. Account created and signed in.

Steps to Reproduce

1. Navigate to: https://en.m.wikivoyage.org/wiki/Special:Preferences/files.
2. Observe the display of “Enable Media Viewer” option.

Expected Behavior: “Enable” and “Media Viewer” texts are aligned.

Actual Behavior: “Media Viewer” text is misaligned.

Note:

1. Reproducible also for French language. https://fr.m.wikivoyage.org/wiki/Spécial:Préférences/files
2. Reproducible also on the Firefox 52.0 Release
3. Not reproducible on Chrome (Mobile) 57.0.2987.132.
4. Screenshot attached.

Watchers: @softvision-sergiulogigan @softvision-oana-arbuzov

sv; country: fr

From webcompat.com with ❤️

[karlcow]

The HTML

<div class="mw-ui-checkbox">
    <input name="wpmultimediaviewer-enable" value="1" checked="checked"
        id="mw-input-wpmultimediaviewer-enable" type="checkbox">&nbsp;
    <label for="mw-input-wpmultimediaviewer-enable">Activer <span class="plainlinks"><a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Extension:Media_Viewer/About">la visionneuse de médias</a></span></label>
</div>

and the associated CSS.

• the upper div is a display:table
• the label is a table-cell
• which contains text (Enable) + a box (span).

.client-js .mw-ui-checkbox:not(#noop) {
    position: relative;
    display: table;
}

.client-js .mw-ui-checkbox:not(#noop) input[type="checkbox"] + label {
    display: table-cell;
}

we can see all of that into

if we remove the

.client-js .mw-ui-checkbox:not(#noop) * {
    font: inherit;
    /* vertical-align: middle; */
}

it displays in the bottom of the cell but at least aligned.

Let's check how the boxes are organized on WebKit

[karlcow]

It's interesting because on Gecko vertical-align: for top, baseline and bottom. all align correctly the text, but when it's middle it's messy. display: inline-flex on the a seems the improve things, but still not perfect.

.client-js .mw-ui-checkbox:not(#noop) * {
    font: inherit;
    vertical-align: middle;
    display: inline-flex;
}

The best way is to replace everything which is table with a flex model.

@dbaron may know why there is a difference in between WebKit/Blink and Gecko.

[softvision-oana-arbuzov]

The issue is still reproducible.

Tested with: Browser / Version: Firefox Mobile Nightly 59.0a1 (2018-01-04) Operating System: Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

[karlcow]

fixed by adding Roboto to the list of fonts.

body {
    font-family: 'Helvetica Neue','Helvetica','Nimbus Sans L','Arial','Liberation Sans', Roboto, sans-serif;
    line-height: 1.4;
    color: #222222;
}

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1392147

[softvision-sergiulogigan]

Issue is still reproducible. tested on Huawei P10, Android 7.0 and Nightly 62.

[karlcow]

So back to the initial suggestion. This is fixing it.

.client-js .mw-ui-checkbox:not(#noop) * {
    font: inherit;
    /* vertical-align: middle; */
}

[karlcow]

All mediawiki projects have the same issue btw.

https://en.m.wikipedia.org/wiki/Special:Preferences#mw-prefsection-rendering

This is set in https://github.com/wikimedia/mediawiki/blob/f2aa8e40f57f97358408b70a5428babd535d6271/resources/src/mediawiki.ui/components/checkbox.less#L46-L50

and probably @jdlrobson can help us fix it.

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-06-24), Firefox Fenix (Preview) 1.0.1926 Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)