Now it has become even worse, the section headings are oversized even without the editing icon. And when the icon shows, it is completely misaligned.

Tagging with some monitored tags.

@matmarex did any of the changes to talk pages trigger this or was this an existing bug beforehand?

Worth noting it's also messed up the TOC:

Anyway, the difference between the pages is that the ones with the problem have a lot of .mw-parser-output .mw-ui-button styles. This is a TemplateData thing, so it's one of the templates on the page that's restyling everything. Specifically it's a style that's inside that opening FragenWP-Flexbox.

Even more specifically: someone has added some fairly wide-ranging styles to Vorlage:MediaWiki-Button (or, well, it's styles), which that other template uses. This has been that way since its creation back in 2018.

It's possible that when T294146 merged https://gerrit.wikimedia.org/r/c/733009 back in February, the removal of the mw-ui-icon-mf- class removed some overrides that were stopping this from being visible?

...anyway, right thing to do is probably to fix their TemplateStyle to actually be specific to the thing they want it to be affecting, which I think is just "icons contained within the button they're templating".

Oh, wait, more importantly, https://gerrit.wikimedia.org/r/c/733009 would have actually added the mw-ui-button class to these elements, so it's definitely the origin. 😂

Ah! Thanks @DLynch for the pointer. This seems like our bug then. Untagging editing team.

@XanonymusX It looks like the solution is to delete all of the styles from https://de.wikipedia.org/wiki/Vorlage:MediaWiki-Button/styles.css, which seem to be copied from an earlier version of the MediaWiki styles. Perhaps you might need to re-apply some de.wp-specific customizations, but at a glance, all of the examples shown on https://de.wikipedia.org/wiki/Vorlage:MediaWiki-Button still work correctly without them (they just use the built-in styles). Would that be possible? (cc @PerfektesChaos, as the creator of that page)

Let’s see what my colleague has to say about it. I don’t need a particular styling of MediaWiki-Buttons. But it seems unexpected that the same classes are used on editing icons.

The reason why that template is providing all those styles has been that MediaWiki does not reliable provide all styles via classes. In 2018 MediaWiki announced that such CSS will be loaded if and only if a MediaWiki generated form (like special page) is requested. These styles are providing the same style for project pages etc., which may lack the CSS now or later.

Some inline style is provided in addition since FOUC occurred; sometimes the naked text appears before CSS came into effect.

That styles.css is in effect only if the template is used.

Apparently some min-width assignments need to be re-adjusted for mobile, depending on @ like scren size, or perhaps font-size.

@PerfektesChaos I feel that the right thing to do with that template would be to have the template itself output a distinctive class on the <div role="button" class="plainlinks> wrapper (that it's already creating) that all its attendant styles can be scoped with. That'd mostly avoid this issue where its styles can spill out to other parts of the content.

Alternately, if it's wholesale copying the styles like this, might as well rename the copied classes in the template+styles to avoid conflict with the site styles. Even when it's not spilling over like with this bug, changes to the site styles could play poorly with the copied styles.

The idea of this /styles.css is to make the identical styles available for both any wikitext and even any JS gadget as distributed by MediaWiki.

This is not limited to this particular button template.

To avoid confusion nothing is to be renamed since that shall follow precisely the current MediWiki Design Department documentation, with the same selectors and structure as used by MediWiki.

The problem is that we cannot rely that these stylesheets are available within a wikitext page any longer. Therefore we need a precise copy of the official MediWiki stylesheet inside wikitext environment.

Obviously something has been changed and for the mobile case we do not have precise copy any longer, but for the headline case something needs to be adapted.

I asked the creator of this task @XanonymusX to explore the differences and to adopt appearance by @ rule.

This is not a mobile issue, but a Minerva issue, as explicated above. So styles would have to use skin selectors, not media queries. But it is very inefficient to further increase the size of those template styles imo, that is exactly the opposite of mobile-friendly. So either the current styles are modified to adapt to Minerva as well or Minerva’s behaviour can be improved.

The template styles override is also breaking table of content styles:

In T294191#8225380, @Jdlrobson wrote:

Overriding styles in this way really seems like a bad idea in my opinion as you'll double loading near-identical styles. A better long-term solution here would be for us to update core to support a tag that generates buttons. That would mean editors could do something like <mw-button>Text</mw-button> to generate a button with the correct styles.

T101666: Create parser tag(s) that render OOUI PHP widgets. I have proposed a patch back in 2015.