Page MenuHomePhabricator

Gap between OOUI ProcessDialog primary action button and header bottom
Closed, ResolvedPublicBUG REPORT


There is a small gap between the primary action button of an OOUI ProcessDialog and the bottom border of the header it is on:

ooui-processdialog-gap.png (596×1 px, 35 KB)

Screenshot is from the OOUI demo page (process dialog, medium) in Chrome 91 on Ubuntu, with developer toolbar emulating Pixel 2XL screen size; can reproduce on a real Pixel 4XL too.

Event Timeline

When using the dialog in MediaWiki (in VE, specifically) the gap is even larger, did not have the time to track down where the difference comes from, it could be something I did.

ooui-processdialog-gap-2.png (420×1 px, 53 KB)

On narrow screens, the OOUI demo switches from 0.875em (14px) to 1em (16px) font size:

@media (min-width: 320px)
.oo-ui-theme-wikimediaui, .oo-ui-theme-apex {
    font-size: 1em;

(This corresponds to the font sizes of Vector and Minerva skins.)

The button's size is apparently partially defined in pixels, while the sizes of everything else in the dialog are defined in ems, so it does not line up correctly with different font size:

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-labelElement > .oo-ui-buttonElement-button {
    padding: 10px 12px;

This is a regression since we changed our padding to be in px instead of em.

Change 725962 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Center and size action buttons to match bar height

Esanders moved this task from To Triage to Triaged on the VisualEditor board.

Change 725962 merged by jenkins-bot:

[oojs/ui@master] Center and size action buttons to match bar height

Change 736621 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update OOUI to v0.42.1

Change 736621 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.42.1

Etonkovidova claimed this task.
Etonkovidova added a subscriber: Etonkovidova.

Checked on testwiki wmf.9 - the issue seems to be fixed (checked on iOS and Android).

Screen Shot 2021-11-17 at 8.00.48 AM.png (552×904 px, 104 KB)
IMG_0445.PNG (1×640 px, 107 KB)