From 0ebae6c4ef5906236d047978dffe7f86908386e4 Mon Sep 17 00:00:00 2001
From: Sam Wilson <sam@samwilson.id.au>
Date: Mon, 30 May 2022 11:46:57 +0800
Subject: [PATCH] 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                   | 1 +
 resources/skins.vector.styles/layouts/screen.less | 3 +--
 skin.json                                         | 1 +
 skinStyles/mediawiki.action.edit.less             | 7 +++++++
 4 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 skinStyles/mediawiki.action.edit.less

diff --git a/resources/common/variables.less b/resources/common/variables.less
index 551e0808..c8c1af2b 100644
--- a/resources/common/variables.less
+++ b/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 );
diff --git a/resources/skins.vector.styles/layouts/screen.less b/resources/skins.vector.styles/layouts/screen.less
index ea714c6b..1aac208e 100644
--- a/resources/skins.vector.styles/layouts/screen.less
+++ b/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.
diff --git a/skin.json b/skin.json
index 8d65f48e..7eb4a711 100644
--- a/skin.json
+++ b/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",
diff --git a/skinStyles/mediawiki.action.edit.less b/skinStyles/mediawiki.action.edit.less
new file mode 100644
index 00000000..ea406fd2
--- /dev/null
+++ b/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;
+}