Merge "In max-width mode, constrain the width of page previews"

resources/common/variables.less

@@ -175,5 +175,6 @@
 // Layout
 //
 @max-width-page-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
+@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
 @padding-horizontal-page-container: unit( 32px / @font-size-browser, em );
 @padding-horizontal-page-container-wide: unit( 40px / @font-size-browser, em );

resources/skins.vector.styles/layouts/screen.less

@@ -27,10 +27,9 @@
 
 @min-width-page-container--padded: @max-width-page-container + ( 2 * @padding-horizontal-page-container ); // 106.875em
 
-// Content containers
+// Content container
 
 @max-width-workspace-container: unit( 1514px / @font-size-browser, em ); // 99.75em @ 16
-@max-width-content-container: unit( 960px / @font-size-browser, em ); // 60em @ 16
 
 // Note this uses variables defined in mediawiki.skin.variables so that VisualEditor can read them
 // see T259331.

skin.json

@@ -352,6 +352,7 @@
 	"ResourceModuleSkinStyles": {
 		"vector-2022": {
 			"+ext.echo.styles.alert": "skinStyles/ext.echo.styles.alert.less",
+			"+mediawiki.action.edit": "skinStyles/mediawiki.action.edit.less",
 			"+mediawiki.action.view.redirectPage": "skinStyles/mediawiki.action.view.redirectPage.less",
 			"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
 			"+oojs-ui-core.styles": "skinStyles/ooui.less",

skinStyles/mediawiki.action.edit.less

@@ -0,0 +1,7 @@
+@import '../resources/common/variables.less';
+
+// Even if the editing form is max-width, the preview should be constrained.
+.skin-vector-disable-max-width #wikiPreview {
+	max-width: @max-width-content-container;
+	margin: auto;
+}