OOjs UI: FieldsetLayout: Styling fixes for `<legend>` labels

[Backport from OOjs UI master as this fixes a significant regression.]

* Make the `<legend>` 'display: inline-table' rather than 'table'.
  A block-level table would push down elements that follow it,
  including the "help" icon, which in turn messed up the fields.
  Fixes T145682, T145678 and first half of T145680.
* Only style .oo-ui-labelElement-label with margin and padding
  if we have the .oo-ui-labelElement class (label is not empty).
  Fixes second half of T145680.

Follow-up to 9cf8b941a9c618f1d7ba2512508f576f70116e1e.

Bug: T145682
Bug: T145678
Bug: T145680
Change-Id: Id95f4167afa6c000d6d2fa2ad7a62b65b6d4d53b

diff --git a/resources/lib/oojs-ui/oojs-ui-core-apex.css b/resources/lib/oojs-ui/oojs-ui-core-apex.css
index a4479f7..6437ca8 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-core-apex.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-apex.css
@@ -401,7 +401,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
        color: inherit;
-       display: table;
+       display: inline-table;
        box-sizing: border-box;
        max-width: 100%;
        padding: 0;
@@ -421,7 +421,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-fieldsetLayout + .oo-ui-formLayout {
        margin-top: 2em;
 }
-.oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
+.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
        font-size: 1.1em;
        margin-bottom: 0.5em;
        padding: 0.25em 0;

diff --git a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
index 09e6cfc..08d91b4 100644 (file)
--- a/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
+++ b/resources/lib/oojs-ui/oojs-ui-core-mediawiki.css
@@ -524,7 +524,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 }
 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
        color: inherit;
-       display: table;
+       display: inline-table;
        box-sizing: border-box;
        max-width: 100%;
        padding: 0;
@@ -544,7 +544,7 @@ body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
 .oo-ui-fieldsetLayout + .oo-ui-formLayout {
        margin-top: 2em;
 }
-.oo-ui-fieldsetLayout > .oo-ui-labelElement-label {
+.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label {
        margin-bottom: 0.5em;
        font-size: 1.1em;
        font-weight: bold;