From: Volker E <volker.e@wikimedia.org>
Date: Fri, 1 Mar 2019 00:17:02 +0000 (-0800)
Subject: RCFilters: Make SaveFiltersPopup header's label and icon wrap
X-Git-Tag: 1.34.0-rc.0~2697
X-Git-Url: http://git.cyclocoop.org/data/%24oldEdit?a=commitdiff_plain;h=fc005c9c917f04c6436456ff04422164d6a00e8b;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Make SaveFiltersPopup header's label and icon wrap

Wrapping SaveFiltersPopup header's label and icon in languages like
Catalan and German.
Also re-positioning close button from absolute top and remove duplicated,
inherited properties.

Change-Id: I3fd35b237f82ab95b66e6e710cba36cf1887618f
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less
index 9f9378a4a0..557bb3c391 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.less
@@ -15,23 +15,25 @@
 			padding-right: 1.875em + 0.5em;
 
 			> .oo-ui-buttonWidget {
-				top: 50%;
-				.transform( translateY( -50% ) );
+				top: 0.5em;
 			}
 
 			> .oo-ui-iconWidget {
-				float: none;
-				display: inline-block;
-				margin: 0;
+				vertical-align: top;
 			}
 
 			> .oo-ui-labelElement-label {
 				float: none;
 				display: inline-block;
+				// Label doesn't wrap without `max-width`. First setting a pretty arbitrary percentage value.
+				max-width: 80%;
+				// Overwrite it with `calc` reduced by icon width and left margin combined.
+				max-width: calc( ~'100% - 1.42857143em - 0.25em' );
+				margin: 0 0 0 0.25em;
 				font-size: 1.2em;
-				margin: 0;
 				font-weight: bold;
-				vertical-align: middle;
+				line-height: 1.25;
+				vertical-align: top;
 			}
 		}
 	}