Vector should support lower 500px resolution

* Lower the min-width from Vector to 500px

At lower resolution per mock:
* Tabs converge into single grouping
* Search input is 150px
* Sidebar rushes content below

Drop rule for mw-content-container for special pages and history as it is already
accounted for in .mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container
rule.

Bug: T264218
Change-Id: I14ee75bd173fb2de1e33067f95ce09deba5bf27a

bundlesize.config.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.3 kB"
+		"maxSize": "9.6 kB"
 	},
 	{
 		"resourceModule": "skins.vector.styles.responsive",

resources/skins.vector.styles/MenuDropdown.less

@@ -153,3 +153,14 @@
 		outline: auto -webkit-focus-ring-color; // Webkit style
 	}
 }
+
+@media ( max-width: @width-breakpoint-tablet ) {
+	// At lower resolutions, particularly when variants are disabled
+	// make sure the menu does not go off the screen.
+	.vector-menu-dropdown {
+		.vector-menu-content-list {
+			right: 0;
+			left: auto;
+		}
+	}
+}

resources/skins.vector.styles/Sidebar.less

@@ -80,6 +80,12 @@
 		.transition( transform @timing, opacity @timing, visibility @timing; );
 	}
 
+	@media ( max-width: @width-breakpoint-tablet ) {
+		.mw-sidebar {
+			transition: none;
+		}
+	}
+
 	// Enable sidebar button transitions.
 	#mw-sidebar-button {
 		.transition(

resources/skins.vector.styles/layout-default.less

@@ -47,13 +47,8 @@ body {
 #p-search {
 	float: left;
 	margin: 0 0 0 @margin-horizontal-search;
-	min-width: @min-width-search;
-	// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
-	width: 13.2em;
-	// Support: Modern browsers, responsive width.
-	width: 20vw;
-	max-width: 100%;
 	flex-grow: 1;
+	flex-basis: @min-width-search;
 
 	#searchform {
 		margin-left: 0;
@@ -161,7 +156,7 @@ body {
 	min-height: 100%;
 	margin-left: auto;
 	margin-right: auto;
-	padding: 0 @padding-horizontal-page-container;
+	padding: 0 ( @padding-horizontal-page-container / 2 );
 	background-color: @background-color-page-container;
 	// Establish a new block formatting context to prevent header top margin
 	// collapsing and causing whitespace to appear between the header and
@@ -195,6 +190,14 @@ body {
 	max-width: @max-width-content-container;
 	margin-left: auto;
 	margin-right: auto;
+
+	// For container logic specific to special pages and history pages.
+	.action-history &,
+	.ns-special & {
+		// Allow the max-width of content on history/special pages to be wider than
+		// the max-width of content on article pages.
+		max-width: none;
+	}
 }
 
 .mw-sidebar-container {
@@ -209,21 +212,6 @@ body {
 	padding-bottom: 82px;
 }
 
-// For container logic specific to special pages and history pages.
-.action-history,
-.ns-special {
-	// Allow the max-width of content on history/special pages to be wider than
-	// the max-width of content on article pages.
-	.mw-content-container {
-		max-width: none;
-	}
-
-	// Adjusts the content when sidebar is open regardless of the viewport width.
-	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
-		margin-left: @margin-start-content;
-	}
-}
-
 // We want it to appear like the sidebar is going into/coming out of
 // `.mw-page-container`, but we can't use `overflow: hidden` on
 // `.mw-page-container` because that will cut off the sidebar. Therefore, we
@@ -241,7 +229,24 @@ body {
 	}
 }
 
+// Adjusts the content when sidebar is open regardless of the viewport width.
+.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container {
+	// For container logic specific to special pages and history pages.
+	.action-history &,
+	.ns-special & {
+		margin-left: @margin-start-content;
+	}
+}
+
 @media ( max-width: @max-width-margin-start-content ) {
+	#p-search {
+		// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
+		width: 13.2em;
+		// Support: Modern browsers, responsive width.
+		width: 20vw;
+		max-width: 100%;
+	}
+
 	// Adjusts the content and mw-article-toolbar-container.
 	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-content-container,
 	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container .mw-article-toolbar-container {
@@ -270,3 +275,34 @@ body {
 		margin-left: auto;
 	}
 }
+
+@media ( min-width: @width-breakpoint-tablet ) {
+	#p-search {
+		min-width: @min-width-search-tablet;
+	}
+
+	.mw-page-container {
+		padding: 0 @padding-horizontal-page-container;
+	}
+}
+
+/**
+ * Makes the sidebar full screen at lower resolutions.
+ */
+@media ( max-width: @width-breakpoint-tablet ) {
+	.mw-checkbox-hack-checkbox:checked ~ .mw-workspace-container {
+		#mw-panel {
+			width: 100%;
+			position: relative;
+			left: 0;
+		}
+
+		// !important as we always want to disable the margin-left on these elements
+		// Using !important is cleaner than having to rely on specificity involved :checked elements
+		.mw-content-container,
+		.mw-article-toolbar-container {
+			// stylelint-disable-next-line declaration-no-important
+			margin-left: 0 !important;
+		}
+	}
+}

resources/skins.vector.styles/layout.less

@@ -27,7 +27,8 @@
 // This assumes the presence of variables inside layout.less. DO NOT import it separately.
 // Assumes various variables defined there.
 
-@min-width-search: unit( 350px / @font-size-browser, em );
+@min-width-search: unit( 150px / @font-size-browser, em );
+@min-width-search-tablet: unit( 350px / @font-size-browser, em );
 @max-width-search: unit( 450px / @font-size-browser, em );
 @margin-horizontal-search: unit( 40px / @font-size-browser, em );
 
@@ -46,7 +47,7 @@
 // the width of the container if you exclude consideration for search
 @min-width-container-base: @padding-horizontal-page-container-ems + @size-sidebar-button + @margin-horizontal-sidebar-button-icon-ems + @min-width-logo + @padding-horizontal-page-container-ems;
 
-@min-width-supported: @min-width-container-base + @min-width-search;
+@min-width-supported: 500px - ( 2 * @padding-horizontal-page-container );
 @width-comfortable: @min-width-container-base + @margin-horizontal-search + @max-width-search + @margin-horizontal-search + @min-width-personal-tools;
 
 @background-color-secondary--modern: #f8f9fa;