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,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"

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

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,

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.