Align right-most header icon with content.

uses the CSS :last-child selector to align the last item in the header
with the edge of the container.
This is usually the notification icon in "normal" mode and
the user menu icon in AMC mode.

Bug: T229440
Change-Id: I4430f5659093f76896e2b86e076526a0b51d9630

includes/skins/SkinMinerva.php

@@ -405,7 +405,7 @@ class SkinMinerva extends SkinTemplate {
 
 			$tpl->set( 'userNotificationsData', [
 				'notificationIconClass' => MinervaUI::iconClass( 'bellOutline-base20',
-					'element', 'mw-ui-icon-flush-right', 'wikimedia' ),
+					'element', 'wikimedia' ),
 				'title' => $notificationsMsg,
 				'url' => $url,
 				'notificationCountRaw' => $count,

resources/skins.minerva.base.styles/userMenu.less

@@ -14,4 +14,9 @@
 	justify-content: flex-end;
 	// Show the list relative the button.
 	position: relative;
+
+	// align the last icon (i.e. notification or use menu) with the container edge.
+	& > *:last-child {
+		margin-right: -@icon-padding-md;
+	}
 }

resources/skins.minerva.loggedin.styles/styles.less

@@ -19,8 +19,6 @@
 	margin: auto;
 	background: @notificationBackgroundRead;
 	color: @notificationColorRead;
-	// same as mw-ui-icon-flush-right
-	margin-right: -@icon-padding-md;
 	cursor: pointer;
 
 	.circle {

resources/skins.minerva.scripts/NotificationBadge.js

@@ -7,7 +7,6 @@
 		Icon = mobile.Icon,
 		notificationIcon = new Icon( {
 			name: 'bellOutline-base20',
-			additionalClassNames: 'mw-ui-icon-flush-right',
 			glyphPrefix: 'wikimedia'
 		} );
 

tests/phpunit/skins/SkinMinervaTest.php

@@ -272,8 +272,7 @@ class SkinMinervaTest extends MediaWikiTestCase {
 	) {
 		return [
 			'notificationIconClass' =>
-				MinervaUI::iconClass( 'bellOutline-base20', 'element',
-					'mw-ui-icon-flush-right', 'wikimedia' ),
+				MinervaUI::iconClass( 'bellOutline-base20', 'element', 'wikimedia' ),
 			'title' => $notificationsMsg,
 			'url' => SpecialPage::getTitleFor( $notificationsTitle )
 				->getLocalURL(