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

This allows the editing form to be wide, but makes sure that the
preview seen will more closely match how the page will end up
after being saved.

Bug: T307725
Change-Id: Ib2085eece69fe08b7fca4aaeacef66b26cdd5f16

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;
+}