Fix width of OOUI TextInputWidget with .mw-editfont-... classes

Bug: T192373
Change-Id: I6a6757874a3502b42cff0a3edb55115a305ad609

diff --git a/resources/Resources.php b/resources/Resources.php
index 0595bb0..308ff86 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1411,7 +1411,7 @@ return [
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'mediawiki.editfont.styles' => [
-               'styles' => 'resources/src/mediawiki/mediawiki.editfont.css',
+               'styles' => 'resources/src/mediawiki/mediawiki.editfont.less',
                'targets' => [ 'desktop', 'mobile' ],
        ],
        'mediawiki.visibleTimeout' => [

diff --git a/resources/src/mediawiki/mediawiki.editfont.css b/resources/src/mediawiki/mediawiki.editfont.css
deleted file mode 100644 (file)
index fe7f324..0000000
--- a/resources/src/mediawiki/mediawiki.editfont.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* Edit font preference */
-.mw-editfont-monospace {
-       font-family: monospace, monospace;
-}
-
-.mw-editfont-sans-serif {
-       font-family: sans-serif;
-}
-
-.mw-editfont-serif {
-       font-family: serif;
-}
-
-/* Standardize font size for edit areas using edit-fonts T182320 */
-.mw-editfont-monospace,
-.mw-editfont-sans-serif,
-.mw-editfont-serif {
-       font-size: 13px;
-}

diff --git a/resources/src/mediawiki/mediawiki.editfont.less b/resources/src/mediawiki/mediawiki.editfont.less
new file mode 100644 (file)
index 0000000..b8e127a
--- /dev/null
+++ b/resources/src/mediawiki/mediawiki.editfont.less
@@ -0,0 +1,30 @@
+/* Edit font preference */
+.mw-editfont-monospace {
+       font-family: monospace, monospace;
+}
+
+.mw-editfont-sans-serif {
+       font-family: sans-serif;
+}
+
+.mw-editfont-serif {
+       font-family: serif;
+}
+
+/* Standardize font size for edit areas using edit-fonts T182320 */
+.mw-editfont-monospace,
+.mw-editfont-sans-serif,
+.mw-editfont-serif {
+       font-size: 13px;
+
+       /* For OOUI TextInputWidget, the parent <div> element uses normal font size, and only
+          the <textarea>/<input> inside of it has the adjusted font size. This allows the width
+          of the widget and size of icons etc. (which are expressed in ems) to stay the same. */
+       &.oo-ui-textInputWidget {
+               font-size: inherit;
+       }
+
+       > .oo-ui-inputWidget-input {
+               font-size: 13px;
+       }
+}