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

Assigned To

Authored By

	Inductiveload
	Apr 19 2021, 3:05 PM

Description

[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:

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

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 created this task.Apr 19 2021, 3:05 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 19 2021, 3:05 PM

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: https://en.wikisource.org/wiki/Special:Diff/11205807/prev

This appears to have been fixed in the update to OOUI 0.44.1: https://github.com/wikimedia/VisualEditor/commit/bc81b354e0984955225e39e9b2f196d1a682bf7a#diff-1cde34117ee25380503e642062c56d5484f57686f51dd65f17316122935a0b84R535 (it's now margin-left: -6px)

	F34407649: 2021-04-19_160152_655x136_screenshot.png
	Apr 19 2021, 3:05 PM

	F34407650: 2021-04-19_160209_1009x201_screenshot.png
	Apr 19 2021, 3:05 PM

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

Description

Event Timeline

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