From 9a1aa2557df616343ddb59c48173f3c3bcd3997f Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Thu, 1 Feb 2018 13:25:00 +0100
Subject: [PATCH] Fix width of OOUI TextInputWidget with .mw-editfont-...
 classes

Bug: T192373
Change-Id: I6a6757874a3502b42cff0a3edb55115a305ad609
---
 resources/Resources.php                       |  2 +-
 .../src/mediawiki/mediawiki.editfont.css      | 19 ------------
 .../src/mediawiki/mediawiki.editfont.less     | 30 +++++++++++++++++++
 3 files changed, 31 insertions(+), 20 deletions(-)
 delete mode 100644 resources/src/mediawiki/mediawiki.editfont.css
 create mode 100644 resources/src/mediawiki/mediawiki.editfont.less

diff --git a/resources/Resources.php b/resources/Resources.php
index 0595bb031c..308ff86ed5 100644
--- 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
index fe7f3240df..0000000000
--- 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
index 0000000000..b8e127a26d
--- /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;
+	}
+}
-- 
2.20.1