I'm rendering a simple checkbox with label using FieldLayout
$fields[] = new OOUI\FieldLayout( new OOUI\CheckboxInputWidget( [ 'name' => 'enableBeta', 'selected' => $context->isBetaGroupMember(), 'inputId' => 'enable-beta-toggle', 'value' => '1', ] ), [ 'label' => new OOUI\LabelWidget( [ 'label' => new OOUI\HtmlSnippet( Html::openElement( 'div', [] ) . Html::element( 'strong', [], $this->msg( 'mobile-frontend-settings-beta' )->parse() ) . Html::element( 'div', [ 'class' => 'option-description' ], $this->msg( 'mobile-frontend-opt-in-explain' )->parse() ) . Html::closeElement( 'div' ) ) ] ), 'align' => 'left', ] );
When rendered on a mobile device it appears like so:
The checkbox is given 60% of the available space and the label the remainder:
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
width: 60%;
}
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
width: 35%;
margin-right: 5%;
}This makes sense on tablet but not so much on mobile.
A good starting point would be to restrict the above rules to tablet. Currently it is near impossible to override them without resorting to !important



