<syntaxhighlight> on en.wp already does wrapping... I see no objection to making that more universal...

pre, .mw-code {
	overflow-x: hidden;
	overflow-wrap: break-word;
}

Some people are religious about pre-wrap, but honestly we introduced this earlier this year on en.wp and no one has really complained: https://en.wikipedia.org/w/index.php?title=MediaWiki:Common.css&diff=891648135&oldid=888970803

Hm, I'm unsure whether cswiki community would be okay with overflow-x: auto. They are really not enthusiastic about any change even from MediaWiki devs. But unlike my edit, about dev edits they can not do much.

The only effect of overflow-x:auto is to create a new 'block formatting context'. Practically this means that these kinds of blocks avoid drawing their background behind floating elements like inboxes. (The H2 headers have the same setting, to avoid their underline runs behind the infobox).

Yes, that's what I want to do. Is this suitable to be incorporated into the MW extension directly?

I think it is. As a matter of fact, maybe it should even go into core (with <pre> being a core element).

As far as I understand, the religious fights are mostly about whether pre should allow manual breaks only, or whether browsers may break lines when too long. Since the core CSS already sets white-space: pre-wrap; for pre, .mw-code, this fight is over, and allowing breaks inside words when necessary shouldn't be much controversial.
On the other hand, this means that there should be only very few code blocks that currently overflow anyway. So I can't imagine that this change could have any real influence on any Wikipedia community using or rejecting code examples.

Change 561285 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/core@master] Break words in <pre> and .mw-code when overflowing

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

Change 561285 merged by jenkins-bot:
[mediawiki/core@master] Break words in <pre> and .mw-code when overflowing

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

That patch is nice but it does not fix this issue.

Testing on a page like this:

asdf
<source style="overflow:auto">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</source>
asdf
<pre style="overflow:auto">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>

Before	After

Both before and after, in the <source> block, the light grey background "bleeds outside" of the dark grey borders.

The idea is to omit the style="overflow:auto", which now doesn't do anything useful.

@matmarex @Schnark
Tested basic example:

[[File:Louisiana 462.svg|thumb]]
<source>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</source>
[[File:Louisiana 462.svg|thumb]]
<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</pre>

Before	Before + overflow:auto	After

It definitely looks more reasonable now. But the gray background of source still goes under the image, see the detail:

Yeah that gray background is interesting.. It's coming from the syntaxhighlight extension, which is using it because it is the style generated by Pygmentize.. Really shouldn't be there, as it doesn't match the background of pre..
Well i guess the easiest fix we can make is to set overflow on .mw-highlight as well, but that needs to be done inside the extension code, not in core. Ah, no you can't, that's how we started with this ;)

The overflows move the margin of the pre inside that <div> and we need to compensate for that.
Hmm, maybe:

.mw-highlight {
    background:inherit;
    overflow-x: auto;
    margin: 1em 0;
}
.mw-highlight > pre {
    margin: 0;
}

The problem here is really that wrapping div around the <pre>. The pre's are generated by pygments if i'm not mistaken, so it's not as if we can easily swap the element in the dom..

Any idea?

Change 571083 had a related patch set uploaded (by TheDJ; owner: TheDJ):
[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Syntaxhighlight: avoid double background

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

Lol, I already 'fixed' this once before in T126010, but it had a typo in the CSS.

Change 571083 merged by jenkins-bot:
[mediawiki/extensions/SyntaxHighlight_GeSHi@master] Syntaxhighlight: avoid double background

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

Perfect!