From e3d2ab503165bbedadd881113bacc34f18e928e5 Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Fri, 17 May 2024 16:28:50 -0700
Subject: [PATCH] Support Vector 2022 at > 320px

In preparation for enabling responsive Vector on Wikifunctions,
we lower the support threshold to 320px for Vector.

Minor adjustments are made to the header to make it use two
lines at lower resolutions.

Fixes to tables to make them responsive will be made shortly as
part of T330527 which will complete the responsive behaviour.

Bug: T361573
Change-Id: Idbac393ab6ee60100ba0fd6df4b224cc45949bfd
---
 resources/skins.vector.styles/components/Header.less | 10 +++++++++-
 resources/skins.vector.styles/components/Logo.less   |  6 ------
 resources/skins.vector.styles/layouts/screen.less    | 11 +++++++++++
 resources/skins.vector.styles/variables.less         |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
index 9bcdefb26..9e65304c4 100644
--- a/resources/skins.vector.styles/components/Header.less
+++ b/resources/skins.vector.styles/components/Header.less
@@ -20,10 +20,13 @@
 	.search-toggle {
 		// At lower resolutions the search input is hidden and a toggle is shown
 		display: inline-flex;
-		float: right;
 		// Ensures the button has a font size of 16px
 		font-size: unit( 16 / @font-size-browser, rem );
 
+		@media ( min-width: @min-width-breakpoint-tablet ) {
+			float: right;
+		}
+
 		@media ( min-width: @min-width-breakpoint-desktop ) {
 			// Override .cdx-button styles
 			display: none !important;  /* stylelint-disable-line declaration-no-important */
@@ -39,6 +42,11 @@
 	}
 
 	@media ( max-width: @max-width-breakpoint-tablet ) {
+		#p-search,
+		.vector-header-end {
+			.cdx-mixin-button-layout-flush( 'start', true );
+		}
+
 		/**
 	 	 * Toggles the visibility of the search box at lower resolutions.
 		 */
diff --git a/resources/skins.vector.styles/components/Logo.less b/resources/skins.vector.styles/components/Logo.less
index 2588cb1bf..65e6213ed 100644
--- a/resources/skins.vector.styles/components/Logo.less
+++ b/resources/skins.vector.styles/components/Logo.less
@@ -22,15 +22,9 @@
 	// This will be ignored in flexbox browsers.
 	float: left;
 	margin-right: 10px;
-	// Hide mobile icon at lower resolutions and defer to wordmark
-	display: none;
 	@size-mw-logo-icon: unit( 50 / @font-size-browser, em );
 	width: @size-mw-logo-icon;
 	height: @size-mw-logo-icon;
-
-	@media ( min-width: @min-width-breakpoint-tablet ) {
-		display: block;
-	}
 }
 
 .mw-logo-container {
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index f478f5d4b..9d87a9d7e 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/resources/skins.vector.styles/layouts/screen.less
@@ -114,6 +114,17 @@ body {
 	background-color: @background-color-page-container;
 }
 
+@media ( max-width: @max-width-breakpoint-tablet ) {
+	.vector-header {
+		flex-flow: column;
+	}
+
+	.vector-header-start,
+	.vector-header-end {
+		width: 100%;
+	}
+}
+
 @media ( min-width: @min-width-breakpoint-desktop ) {
 	.mw-page-container,
 	.vector-header-container .mw-header,
diff --git a/resources/skins.vector.styles/variables.less b/resources/skins.vector.styles/variables.less
index fe477d8c6..ee67f6a8f 100644
--- a/resources/skins.vector.styles/variables.less
+++ b/resources/skins.vector.styles/variables.less
@@ -13,7 +13,7 @@
 
 // Defines the minimum viewport width, at which point the layout will not get any
 // smaller and will start horizontal scrolling instead.
-@min-width-supported: unit( 500px / @font-size-browser, em );
+@min-width-supported: unit( 300px / @font-size-browser, em );
 
 // Sizing calculation primitives.
 @font-size-root: 100%;