Add class `mwe-math-element` to math elements

This is the fix for the bug that makes the whole page scroll when long 
equations are present in the wiki article.

Bug: T134281
Change-Id: I29f8df027384098cd0923bcfa23a914c8d887bba

MathMathML.php

@@ -418,6 +418,7 @@ class MathMathML extends MathRenderer {
 	 * @return string the class name
 	 */
 	private function getClassName( $fallback = false ) {
+		global $wgMathElementClassName;
 		$class = 'mwe-math-';
 		if ( $fallback ) {
 			$class .= 'fallback-image-';
@@ -434,7 +435,7 @@ class MathMathML extends MathRenderer {
 			$class .= ' mwe-math-mathml-a11y';
 			// @codingStandardsIgnoreEnd
 		}
-		return $class;
+		return $class . " $wgMathElementClassName";
 	}
 
 	/**

MathSource.php

@@ -35,11 +35,13 @@ class MathSource extends MathRenderer {
 	function getHtmlOutput() {
 		# No need to render or parse anything more!
 		# New lines are replaced with spaces, which avoids confusing our parser (bugs 23190, 22818)
+		global $wgMathElementClassName;
 		if ( $this->getMathStyle() == 'display' ) {
 			$class = 'mwe-math-fallback-source-display';
 		} else {
 			$class = 'mwe-math-fallback-source-inline';
 		}
+		$class .= " $wgMathElementClassName";
 		return Xml::element( 'span',
 			$this->getAttributes(
 				'span',

MathTexvc.php

@@ -137,6 +137,7 @@ class MathTexvc extends MathRenderer {
 	 * @return string img HTML
 	 */
 	public function getMathImageHTML() {
+		global $wgMathElementClassName;
 		$url = $this->getMathImageUrl();
 		$attributes = [
 			// the former class name was 'tex'
@@ -148,6 +149,7 @@ class MathTexvc extends MathRenderer {
 			// if DisplayStyle is true, the equation will be centered in a new line
 			$attributes[ 'class' ] = 'mwe-math-fallback-image-display tex';
 		}
+		$attributes[ 'class' ] .= " $wgMathElementClassName";
 		return Xml::element( 'img',
 			$this->getAttributes(
 				'img',

extension.json

@@ -115,7 +115,8 @@
 		],
 		"MathEnableWikibaseDataType": true,
 		"Texvc": false,
-		"TexvcBackgroundColor": "transparent"
+		"TexvcBackgroundColor": "transparent",
+		"MathElementClassName": "mw-math-element"
 	},
 	"VisualEditorPluginModules": [
 		"ext.math.visualEditor"

modules/ext.math.css

@@ -57,3 +57,7 @@ generated by Mathoid. See https://gerrit.wikimedia.org/r/#/c/166213/ */
 img.tex {
 	vertical-align: middle;
 }
+.mwe-math-element {
+	overflow-x: auto;
+	max-width: 100%;
+}