Page MenuHomePhabricator

OOUI FieldLayout with "help button" breaks line when font size set smaller than 16
Closed, ResolvedPublicBUG REPORT


[Following on from a user report at enWS]

If the browser font size is set to smaller than default (16), the layout of an OOUI FieldLayout is incorrect. For example, editing any index page at enWS should look like this:

2021-04-19_160152_655x136_screenshot.png (136×655 px, 8 KB)

But if you set a font size of 15 or lower, it looks like this:

2021-04-19_160209_1009x201_screenshot.png (201×1 px, 10 KB)

I imagine it's related to this CSS:

.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
    margin-right: 0;
    margin-left: -2.35714286em;

Changing that to -3em, for example, seems to work.

The report was in Chrome, and I reproduced in Firefox.

Event Timeline

Inductiveload changed the subtype of this task from "Task" to "Bug Report".Apr 19 2021, 3:17 PM

This is also an issue in Monobook with default settings. enWS now has a workaround: