From 4c622fe8deff33fe4d5df28bc459115e7f637ef1 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Mon, 25 Jul 2022 15:41:39 -0500
Subject: [PATCH] Correct ContentHeader source order to match design

- Use flexbox instead of float

Visual changes:
- The title wraps differently when the title is very long

Bug: T313947
Change-Id: I2915e36286b21c8fd1a07247ada7754a08a0b574
---
 includes/templates/ContentHeader.mustache     | 23 ++++++++++---------
 .../components/ContentHeader.less             |  9 ++++++++
 .../components/LanguageButton.less            |  1 +
 resources/skins.vector.styles/skin.less       |  1 +
 4 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 resources/skins.vector.styles/components/ContentHeader.less

diff --git a/includes/templates/ContentHeader.mustache b/includes/templates/ContentHeader.mustache
index 44df8c34..d1e43cb2 100644
--- a/includes/templates/ContentHeader.mustache
+++ b/includes/templates/ContentHeader.mustache
@@ -2,17 +2,7 @@
     Content Header - Main <H1> title for all pages, with either the indicators or language selector.
     When language button is visible, indicators are placed in the ContentSubheader.mustache template instead.
 }}
-<header class="mw-body-header">
-    {{#is-language-in-content-top}}
-        {{#data-portlets.data-languages}}
-            {{>Menu}}
-        {{/data-portlets.data-languages}}
-    {{/is-language-in-content-top}}
-
-    {{^is-language-in-content-top}}
-        {{>Indicators}}
-    {{/is-language-in-content-top}}
-
+<header class="mw-body-header vector-page-titlebar">
 	{{#data-toc}}
 	<label
 		id="vector-toc-collapsed-button"
@@ -26,5 +16,16 @@
 		{{msg-vector-toc-collapsible-button-label}}
 	</label>
 	{{/data-toc}}
+
     {{{html-title-heading}}}
+
+	{{#is-language-in-content-top}}
+        {{#data-portlets.data-languages}}
+            {{>Menu}}
+        {{/data-portlets.data-languages}}
+    {{/is-language-in-content-top}}
+
+    {{^is-language-in-content-top}}
+        {{>Indicators}}
+    {{/is-language-in-content-top}}
 </header>
diff --git a/resources/skins.vector.styles/components/ContentHeader.less b/resources/skins.vector.styles/components/ContentHeader.less
new file mode 100644
index 00000000..33457905
--- /dev/null
+++ b/resources/skins.vector.styles/components/ContentHeader.less
@@ -0,0 +1,9 @@
+.vector-page-titlebar {
+	display: flex;
+	border-bottom: 1px solid @border-color-base;
+
+	.firstHeading {
+		flex-grow: 1;
+		border: 0;
+	}
+}
diff --git a/resources/skins.vector.styles/components/LanguageButton.less b/resources/skins.vector.styles/components/LanguageButton.less
index f9c52f7b..04305d6c 100644
--- a/resources/skins.vector.styles/components/LanguageButton.less
+++ b/resources/skins.vector.styles/components/LanguageButton.less
@@ -12,6 +12,7 @@
 	margin-right: -@icon-padding-md;
 	box-sizing: border-box;
 	height: @height-button-lang;
+	flex-shrink: 0;
 
 	.mw-ui-icon:before {
 		// Put icon on correct standard normal state color.
diff --git a/resources/skins.vector.styles/skin.less b/resources/skins.vector.styles/skin.less
index c89f6154..70ac452e 100644
--- a/resources/skins.vector.styles/skin.less
+++ b/resources/skins.vector.styles/skin.less
@@ -12,6 +12,7 @@
 
 	// Components
 	@import './components/ArticleToolbar.less';
+	@import './components/ContentHeader.less';
 	@import './components/SearchBoxLoader.less';
 	@import './components/VueEnhancedSearchBox.less';
 	@import './components/Sidebar.less';