Same happens on mobile web. Compare https://en.m.wikipedia.org/wiki/RSC_Anderlecht#Players
vs. https://en.wikipedia.org/wiki/R.S.C._Anderlecht#Players.

It's due to "max-width: 100% !important;" on the image.

That template's markup is horrendous for responsive layout. As it uses two separate tables in two <td>s, it doesn't take the overflow-x property for table overflows into account. Instead of fixing behavior around this markup, we should probably rather improve the template markup.

A first step would be to put min-width: 23px to the <td> which holds the .flagicon.

Is this task actionable in extension code? I'd like to remove Web-Team-Backlog and mark with the proper extension or other project if it's really an extension responsibility or some other Phabricator-associated project's responsbility.

@dr0ptp4kt So from my research back three months it was a template issue, not an extension one. What would be the right place/the right tag to mark it with then?

We could add the following rule to MediaWiki:Mobile.css

.flagicon img {
    min-width: 23px;
}

That will solve this one specific problem of flags, but the more general problem remains. Ideally again, this is an example of something that could be more easily fixed if we had T483: RfC: Allow styling in templates

[edit] proposed on en.wp

Where is the max-width coming from?

From https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/4f0db830a8c0e792b944836e201ce07dc47777e2/resources/skins.minerva.content.styles/images.less#L49-L57

Partially added in this commit.

This happens because of the rule .content a > img {max-width: 100% !important; } which is what makes images responsive.

This particilar image is inside inline element (a, span)
It can be fixed by defining a width on flagicon on wiki
e.g.

.flagicon {
    width: 23px;
    display: inline-block;
}

Something to bring up on https://en.wikipedia.org/wiki/Template_talk:Flagicon ?

@Jdlrobson specific case for flags added to en.wp

I was thinking about this again, and maybe we should solve this with some JS post processing.

Something like:

$('table img').each( function( i, element ) {
  if( $(element).attr('width') >= 120 ) {
      $(element).css( 'min-width', 120 + 'px' );
  } else if ( $(element).attr('width') < 120 ) {
      $(element).css( 'min-width', $(element).attr('width') + 'px');
  }
} );

It would cause a reflow of some page content, but since it's limited to tables, it's probably going to be quite rare. It also won't work for elements which are in table layout, but not an actual table....
My cutoff at 120 is rather arbitrarily chosen, but can be refined.

The line max-width: 100% !important; seems to make the images of the table to disappear from the table
https://pt.m.wikipedia.org/wiki/Lista_de_presidentes_do_Brasil#Lista_de_presidentes
once we scroll down to the next section and then scroll up again to the table:
https://imgur.com/VBuRbJ1

On Firefox's Inspector, disabling the CSS rule mentioned above restores the image and enabling it again, removes the images. More specifically, it seems to reduce the width/height of the image to zero, since I get

$('table img').first().width()
90

when the CSS rule is disabled and

$('table img').first().width()
0

when it is enabled.

@He7d3r yes, that's expected (per the CSS spec) when you have such a sized element inside table layout. The problem is that you cannot easily know which images are inside an element using table layout. And if you want to have responsive image sizing (which requires max-width: 100% !important), then you have a problem.

The workarounds are:
1: Put explicit size on your table cells
or
2: Put min-width on your images

Unfortunately this is not an easy problem to fix if you cannot predict your content.

can this fix be added to https://en.wikipedia.org/w/index.php?title=Template:Flagicon/core now?

I thought it was worth adding that the sporting nationality flag icons are now missing entirely for "Players" sections of all association football club articles viewed on the Wikipedia App (Android). The current situation now conflicts with this ticket's title that "the images are too small", so an update to the ticket title & description might be required. Thank you!

Be advised, this issue is a possible duplicate of: https://phabricator.wikimedia.org/T201884

See screenshot of same page, below:

@Thbrown: Cannot reproduce in a web browser when using mobile frontend. Issues with a mobile app should probably go into a specific task for an app. Thanks

Thanks @Aklapper
In that case, I think https://phabricator.wikimedia.org/T201884 covers the issue enough. I will close this ticket.