From ddf8706ae48f0c2cfbfcd9f6528a1e174ad97a10 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Wed, 9 Nov 2022 14:53:29 -0600
Subject: [PATCH] Fix main menu button spacing when the VisualEnhancementNext
 flag is enabled

This patch results in an expected visual change for the main menu button when the flag is on
When comparing with master with the flag off, this patch will still show a 1px difference for the main menu button, as well as user menu and language button. These are not introduced by this patch and are due to the flush classes taking into account the 1px border

Change-Id: Id46bc939338d5bbcc3459ab502e1cf8b8f2020b2
---
 includes/templates/Header.mustache                   | 2 +-
 resources/common/variables.less                      | 1 +
 resources/skins.vector.styles/components/Header.less | 4 +++-
 resources/skins.vector.styles/components/Logo.less   | 5 +++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache
index 9d66ee636..405447db9 100644
--- a/includes/templates/Header.mustache
+++ b/includes/templates/Header.mustache
@@ -2,7 +2,7 @@
 	<div class="vector-header-start">
 		<label
 			id="mw-sidebar-button"
-			class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element"
+			class="mw-checkbox-hack-button mw-ui-icon mw-ui-button mw-ui-quiet mw-ui-icon-element mw-ui-icon-flush-right"
 			for="mw-sidebar-checkbox"
 			role="button"
 			aria-controls="mw-panel"
diff --git a/resources/common/variables.less b/resources/common/variables.less
index 706ddf735..255bbee91 100644
--- a/resources/common/variables.less
+++ b/resources/common/variables.less
@@ -135,6 +135,7 @@
 @padding-dropdown-menu-item: 0 12px;
 
 // Menu button
+// Delete this variable when VisualEnhancementNext flag is enabled everywhere
 @margin-horizontal-sidebar-button-icon: unit( 12px / @font-size-browser, em ); // 0.75em @ 16
 
 // Main menu
diff --git a/resources/skins.vector.styles/components/Header.less b/resources/skins.vector.styles/components/Header.less
index 05c5ecc49..cc6d39a33 100644
--- a/resources/skins.vector.styles/components/Header.less
+++ b/resources/skins.vector.styles/components/Header.less
@@ -27,7 +27,9 @@
 	}
 
 	#mw-sidebar-button {
-		margin-right: @margin-horizontal-sidebar-button-icon; // Accidentally the same.
+		.vector-feature-visual-enhancement-next-disabled & {
+			margin-right: @margin-horizontal-sidebar-button-icon;
+		}
 	}
 
 	.vector-header-start,
diff --git a/resources/skins.vector.styles/components/Logo.less b/resources/skins.vector.styles/components/Logo.less
index 6531b28ba..e9d2b0a47 100644
--- a/resources/skins.vector.styles/components/Logo.less
+++ b/resources/skins.vector.styles/components/Logo.less
@@ -2,6 +2,11 @@
 @import 'mediawiki.mixins.less';
 
 .mw-logo {
+	.vector-feature-visual-enhancement-next-enabled & {
+		// The logo is 24px from the main menu button icon
+		margin-left: 24px;
+	}
+
 	.flex-display();
 	// If icon is not configured, ensure that the logo still takes up available
 	// space allocated by layout.