feat: move discussion to the top of the more menu

Also clean up some related-styles

includes/Partials/PageTools.php

@@ -94,6 +94,11 @@ final class PageTools extends Partial {
 				$actionshtml[ 'label-class' ] .= 'screen-reader-text';
 			}
 
+			if ( $namespaceshtml ) {
+				$namespaceshtml[ 'label-class' ] ??= '';
+				$namespaceshtml[ 'label-class' ] .= 'screen-reader-text';
+			}
+
 			$props = [
 				'data-page-views' => $viewshtml,
 				'data-page-actions' => $actionshtml,

resources/skins.citizen.styles/Pagetools.less

@@ -84,6 +84,57 @@
 		}
 	}
 
+	> .mw-portlet {
+		ul {
+			display: flex;
+		}
+
+		li > a {
+			display: flex;
+			align-items: center;
+			padding: 8px 12px;
+			margin-right: 4px;
+			border-radius: var( --border-radius--medium );
+			color: var( --color-base );
+			font-size: 0;
+			transition: @transition-background-quick, @transition-color-quick;
+
+			&:after {
+				width: var( --size-icon );
+				height: var( --size-icon );
+				order: -1; // Move icon before the text
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: var( --size-icon );
+				content: '';
+				opacity: var( --opacity-icon-base );
+				transition: @transition-opacity-quick;
+			}
+
+			&:hover {
+				background-color: var( --background-color-quiet--hover );
+				color: var( --color-base--emphasized );
+
+				&:after {
+					opacity: var( --opacity-icon-base--hover );
+				}
+			}
+
+			&:active {
+				background-color: var( --background-color-quiet--active );
+				color: var( --color-base--subtle );
+
+				&:after {
+					opacity: var( --opacity-icon-base--active );
+				}
+			}
+
+			span {
+				.mixin-screen-reader-text;
+			}
+		}
+	}
+
 	ul {
 		margin: 0;
 		list-style: none;
@@ -95,55 +146,6 @@
 }
 
 #p-views {
-	ul {
-		display: flex;
-	}
-
-	li > a {
-		display: flex;
-		align-items: center;
-		padding: 8px 12px;
-		margin-right: 4px;
-		border-radius: var( --border-radius--medium );
-		color: var( --color-base );
-		font-size: 0;
-		transition: @transition-background-quick, @transition-color-quick;
-
-		&:after {
-			width: var( --size-icon );
-			height: var( --size-icon );
-			order: -1; // Move icon before the text
-			background-position: center;
-			background-repeat: no-repeat;
-			background-size: var( --size-icon );
-			content: '';
-			opacity: var( --opacity-icon-base );
-			transition: @transition-opacity-quick;
-		}
-
-		&:hover {
-			background-color: var( --background-color-quiet--hover );
-			color: var( --color-base--emphasized );
-
-			&:after {
-				opacity: var( --opacity-icon-base--hover );
-			}
-		}
-
-		&:active {
-			background-color: var( --background-color-quiet--active );
-			color: var( --color-base--subtle );
-
-			&:after {
-				opacity: var( --opacity-icon-base--active );
-			}
-		}
-
-		span {
-			.mixin-screen-reader-text;
-		}
-	}
-
 	// VE styles shouldn't be core but it is just a few lines :/
 	#ca-ve-edit {
 		order: 98; // Before source edit
@@ -197,19 +199,21 @@
 }
 
 @media ( min-width: @width-breakpoint-tablet ) {
-	.page-actions-more-menu {
+	.page-actions {
-		position: relative;
+		&-more-menu {
-		right: unset;
+			position: relative;
-		left: -172px;
+			right: unset;
-		width: 200px;
+			left: -172px;
-	}
+			width: 200px;
+		}
 
-	#p-views {
+		> .mw-portlet {
-		li > a {
+			li > a {
-			font-size: @ui-menu-text;
+				font-size: @ui-menu-text;
 
-			&:after {
+				&:after {
-				margin-right: 8px;
+					margin-right: 8px;
+				}
 			}
 		}
 	}

templates/PageTools.mustache

@@ -8,8 +8,8 @@
 		{{#data-page-views}}{{>Menu}}{{/data-page-views}}
 		<div class="page-actions-more">
 			<nav class="page-actions-more-menu">
-				{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
 				{{#data-namespaces}}{{>Menu}}{{/data-namespaces}}
+				{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
 				{{#data-variants}}{{>Menu}}{{/data-variants}}
 				{{#data-page-toolbox}}{{>Menu}}{{/data-page-toolbox}}
 			</nav>