From: Volker E <volker.e@wikimedia.org>
Date: Fri, 2 Nov 2018 23:58:53 +0000 (-0700)
Subject: RCFilters: Use `display: flex` for better responsiveness on narrow canvas
X-Git-Tag: 1.34.0-rc.0~3548^2~1
X-Git-Url: http://git.cyclocoop.org/%7B%24admin_url%7Dmes_infos.php?a=commitdiff_plain;h=d3cee1316f517ba643b8535fa8a30e6ad1a3f028;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Use `display: flex` for better responsiveness on narrow canvas

Bug: T197065
Change-Id: I0fdff660a480aeedc096bc4ec48b05569e67e595
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
index f7081af411..febdebca00 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
@@ -17,3 +17,52 @@
 		vertical-align: top;
 	}
 }
+
+// Support: Edge 12+, Firefox 28+, Chrome 28+, Saf 9+, Op 17+, iOS 9+, Android 4.4+
+// Use Flexbox in browsers supporting it only
+@supports ( display: flex ) {
+	// Equal cells which wrap, with 1em of space in between
+	.mw-rcfilters-ui {
+		&-row {
+			display: flex;
+			flex-wrap: wrap;
+			margin: 0 -0.5em;
+			justify-content: space-between;
+		}
+
+		&-cell {
+			flex: 1 1;
+			padding: 0 0.5em;
+		}
+
+		&-watchlistTopSectionWidget-watchlistDetails {
+			min-width: 20em;
+		}
+
+		&-filterTagMultiselectWidget-cell-save,
+		&-filterTagMultiselectWidget-cell-reset,
+		&-filterTagMultiselectWidget-views-select,
+		&-watchlistTopSectionWidget-editWatchlistButton,
+		&-watchlistTopSectionWidget-savedLinks,
+		&-itemMenuOptionWidget-highlightButton,
+		&-itemMenuOptionWidget-excludeLabel,
+		&-rcTopSectionWidget-savedLinks{
+			flex: 0 1;
+			align-self: flex-end;
+		}
+
+		&-filterTagMultiselectWidget-views-select {
+			// FIXME: Possible bug in the current styling?
+			width: auto !important; // stylelint-disable-line declaration-no-important
+			padding-left: 0;
+		}
+
+		&-filterTagMultiselectWidget-views-input {
+			padding-right: 0;
+		}
+
+		&-watchlistTopSectionWidget-editWatchlistButton .oo-ui-buttonWidget {
+			margin-left: 0;
+		}
+	}
+}