Merge "Reapply "mw.notify: Limit width of overlay to max-width-page-container""

skinStyles/mediawiki.notification.less

@@ -4,6 +4,16 @@
 
 .mw-notification-area {
 	font-size: @font-size-notification;
+	// Center the notification area with a maximum width.
+	// We can't center .mw-notification-area-overlay as that would break position:fixed.
+	width: 100%;
+	box-sizing: border-box;
+	left: 50%;
+	transform: translateX( -50% );
+
+	.vector-feature-limited-width-clientpref-1 & {
+		max-width: @max-width-page-container / @font-size-notification;
+	}
 }
 
 .mw-notification-area-layout {
@@ -14,6 +24,12 @@
 	border: @border-base;
 	border-radius: @border-radius-base;
 	box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
+	// As the notification area was centered and given variable width, restore
+	// the fixed width of notifications here. Matches .mw-notification-area
+	// rule in core.
+	width: 20em;
+	box-sizing: border-box;
+	margin-left: auto;
 }
 
 .vector-sticky-header-enabled .mw-notification-area {
@@ -26,5 +42,5 @@
  * should be moved so that it doesn't obstruct the sticky header
  */
 .vector-sticky-header-visible .mw-notification-area-overlay > .mw-notification-area-floating {
-	transform: translateY( @height-header );
+	transform: translate( -50%, @height-header );
 }