This also occurs on desktop at lower resolutions.
The .mwe-math-element-block element is a SPAN so is inline by default.

{F71776963}

Per https://phabricator.wikimedia.org/T182041 it needs to be a span and it renders correctly on desktop. So I don’t know if anything can be done from within Math extension code, except for removing images entirely.

Per https://phabricator.wikimedia.org/T182041 it needs to be a span and it renders correctly on desktop.

Your screenshot shows the DESKTOP site on a mobile device. I am testing in a resized browser window viewing it at 720px to get the desired effect and I have the tools menu closed on the right (which appears to be open in your example suggesting). Note on a mobile device, Vector 2022 forces itself into a desktop rendering mode.

So I don’t know if anything can be done from within Math extension code, except for removing images entirely.

The markup is identical on mobile to desktop. MobileFrontend doesn't touch the CSS or HTML.

@Jdlrobson-WMF thank you for the clarification.
In the CSS there is display: inline-block, which seems to come from I0780e6c4bc5a6da636d194ea22a9edf34b98ce1b

In the CSS there is display: inline-block, which seems to come from I0780e6c4bc5a6da636d194ea22a9edf34b98ce1b

span.mwe-math-element.mwe-math-element-block seems to be defaulting as inline and mwe-math-mathml-display the child is block. For the overflow to work the block needs to be on mwe-math-element

Perhaps this needs to change to

span.mwe-math-element.mwe-math-element-block {
    display: block;
}

@Jdlrobson-WMF do you mean

@import 'mediawiki.skin.defaults.less';

/* [[phab:T201233]] */
@media ( max-width: @max-width-breakpoint-tablet ) {
	.mwe-math-element-block,
	dd .mwe-math-element-inline {
		overflow-x: auto;
		vertical-align: middle;
		max-width: 100%;
	}
}
/* [[phab:T416809]] */
@media ( max-width: @max-width-breakpoint-tablet ) {
	dd .mwe-math-element-inline {
		display: inline-block;
	}
}

That should only touch the display attribute, of inline elements.

No, I mean:

@import 'mediawiki.skin.defaults.less';

/* [[phab:T201233]] */
@media ( max-width: @max-width-breakpoint-tablet ) {
	.mwe-math-element-block,
	dd .mwe-math-element-inline {
		overflow-x: auto;
		vertical-align: middle;
		max-width: 100%;
	}
}
/* [[phab:T416809]] */
@media ( max-width: @max-width-breakpoint-tablet ) {
	dd .mwe-math-element-inline {
		display: inline-block;
	}
	.mwe-math-element-block {
		display: block;
	}
}

Your code wouldn't work for the fallback display (mwe-math-fallback-image-display) as span.mwe-math-element-block would confusingly render as an inline element.

Note, if we could move the img tag to a child of mwe-math-mathml-display or have a common parent element, then we could move the rules to that element if it's important to keep .mwe-math-element inline.

I tested that quite a bit and still don't understand when we would need

	.mwe-math-element-block {
		display: block;
	}

MathML sets the attribute display explicitly in the HTML output and fallback images set it via css.

Change #1238057 had a related patch set uploaded (by Physikerwelt; author: Physikerwelt):

[mediawiki/extensions/Math@master] Don't overwrite the display attribute of block rendering

https://gerrit.wikimedia.org/r/1238057

Hopefully i clarified on Gerrit but you need to add this test case https://en.wikipedia.beta.wmcloud.org/wiki/T416809 and ensure you are not introducing horizontal scrolling to the whole page like so:

Ok, I think I get the idea. However, what I currently see (without any change) are no scroll bars in MathML

(screenshot with safari in responsive design mode, as I could not convince FF to make the window small enough:-)

In T416809#11599748, @Jdlrobson-WMF wrote:

test case https://en.wikipedia.beta.wmcloud.org/wiki/T416809

note that mathml renders to SVG and native (the default in beta) renders to MathML. I know it's a bit confusing.

Yeh the rule is intended to cover all different renderings. It would be a lot less confusing once MathML is default :-) Thanks for your patience with me :)

Change #1238057 merged by jenkins-bot:

[mediawiki/extensions/Math@master] Don't overwrite the display attribute of block rendering

https://gerrit.wikimedia.org/r/1238057

I note that the linked change log mentions math formatted as

:<math>e^{i\pi}+1=0</math>

This is an abuse of description list markup that generates invalid HTML (dd without preceding dt). I eliminate it whenever I see it on Wikipedia but I have been told in the past to just use display=block rather than wrap in {{block indent}}. Is this advice now changing?

@HairyDude thank you for chaning from :<math to <math display=block that's what I would recommend.

The change, however, does try to make the layout for :<math not worth, as we assume that there are still :<math instances around. The community started discussions at T111712 T268922 but it seems very hard to achieve consensus.

For me the fact that <math>\somTex</math> is rendered as {\displaystyle \someTex} generates all kinds of problems and I would very much like to get away, without to annoy the editors.