Make the tabs scrollable horizontally

* Add a container around the tabs and use flexbox
  to position the tabs on one line and make it
  scrollable.
* Add some JS to scroll the currently selected
  tab into view.

Bug: T223142
Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81

includes/skins/minerva.mustache

@@ -34,9 +34,11 @@
 					{{{taglinehtml}}}
 				</div>
 				{{#tabs}}
-					{{#items}}
-						<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}">{{text}}</a>
-					{{/items}}
+					<div class="minerva__tab-container">
+						{{#items}}
+							<a href="{{href}}" rel="{{rel}}" class="minerva__tab {{class}}">{{text}}</a>
+						{{/items}}
+					</div>
 				{{/tabs}}
 				{{{subtitle}}}
 				{{{pageactionshtml}}}

resources/skins.minerva.amc.styles/tabs.less

@@ -1,23 +1,31 @@
-.minerva__tab {
-	font-size: @taglineFontSize;
-	margin: 0 10px 1px 0;
-	color: @colorGray5;
-	font-weight: bold;
-	padding-bottom: 6px;
-	display: inline-block;
+.minerva__tab-container {
+	display: flex;
+	flex-wrap: nowrap;
+	overflow-x: auto;
 
-	&:visited,
-	&:hover,
-	&:active,
-	&.new,
-	&.new:visited,
-	&.new:active,
-	&.new:hover {
+	.minerva__tab {
+		font-size: @taglineFontSize;
+		margin: 0 10px 1px 0;
 		color: @colorGray5;
-		text-decoration: none;
-	}
-	// note core doesn't use BEM.
-	&.selected {
-		border-bottom: (@pageActionBorder * 2) solid @colorGray5;
+		font-weight: bold;
+		padding-bottom: 6px;
+		display: inline-block;
+		flex: 0 0 auto;
+
+		&:visited,
+		&:hover,
+		&:active,
+		&.new,
+		&.new:visited,
+		&.new:active,
+		&.new:hover {
+			color: @colorGray5;
+			text-decoration: none;
+		}
+
+		// note core doesn't use BEM.
+		&.selected {
+			border-bottom: (@pageActionBorder * 2) solid @colorGray5;
+		}
 	}
 }

resources/skins.minerva.scripts/init.js

@@ -294,6 +294,28 @@
 		} );
 	}
 
+	/**
+	 * When tabs are present and one is selected, scroll the selected tab into view.
+	 * @return {void}
+	 */
+	function initTabsScrollPosition() {
+		var selectedTabSelector = '.minerva__tab.selected',
+			$selectedTab;
+		if ( window.pageYOffset ) {
+			// The user has already scrolled down the page.
+			// Calling scrollIntoView() below would force the page to
+			// scroll back all the way up. That is undesirable.
+			return;
+		}
+		$selectedTab = $( selectedTabSelector );
+		if ( $selectedTab.length === 1 ) {
+			$selectedTab[ 0 ].scrollIntoView( {
+				block: 'end', // does nothing since we're already at the top of the page
+				inline: 'center' // center horizontally
+			} );
+		}
+	}
+
 	$( function () {
 		var toolbarElement = document.querySelector( Toolbar.selector );
 		// Update anything else that needs enhancing (e.g. watchlist)
@@ -307,6 +329,7 @@
 		}
 		initRedlinksCta();
 		initUserRedLinks();
+		initTabsScrollPosition();
 		// Setup the issues banner on the page
 		// Pages which dont exist (id 0) cannot have issues
 		if ( !page.isMissing ) {