From e674d7e73bf6816f4dcbee5bee35f09cb53b88e9 Mon Sep 17 00:00:00 2001
From: tameeshb <tameeshbiswas1998@gmail.com>
Date: Tue, 13 Dec 2016 22:29:14 +0530
Subject: [PATCH] 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       | 3 ++-
 MathSource.php       | 2 ++
 MathTexvc.php        | 2 ++
 extension.json       | 3 ++-
 modules/ext.math.css | 4 ++++
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/MathMathML.php b/MathMathML.php
index 40bc77c49..681b90ba7 100644
--- a/MathMathML.php
+++ b/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";
 	}
 
 	/**
diff --git a/MathSource.php b/MathSource.php
index 93d403d44..792e755d5 100644
--- a/MathSource.php
+++ b/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',
diff --git a/MathTexvc.php b/MathTexvc.php
index 6c61d8610..aa64ea086 100644
--- a/MathTexvc.php
+++ b/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',
diff --git a/extension.json b/extension.json
index a05965510..c9ce09323 100644
--- a/extension.json
+++ b/extension.json
@@ -115,7 +115,8 @@
 		],
 		"MathEnableWikibaseDataType": true,
 		"Texvc": false,
-		"TexvcBackgroundColor": "transparent"
+		"TexvcBackgroundColor": "transparent",
+		"MathElementClassName": "mw-math-element"
 	},
 	"VisualEditorPluginModules": [
 		"ext.math.visualEditor"
diff --git a/modules/ext.math.css b/modules/ext.math.css
index 69ea129b8..9892ce28e 100644
--- a/modules/ext.math.css
+++ b/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%;
+}