I don't see a problem. This seems to work as expected.. Though for some reason the floating of the infobox seems broken. Either because the tablet styling is missing, or because MediaWiki:mobile.css is missing.

@TheDJ The problem is that this causes a horizontal scrollbar for the infobox. I've updated the task description to add a better screenshot.

I'm thinking that this is coming from this CSS rule setting display to flex instead of table:

.content table.infobox {
    /* [...] */
    display: flex;
    flex: 1 1 100%;
    flex-flow: column nowrap;
}

I think it's coming from this commit. Do you happen to remember any good example pages where the Flex box layout rules are needed (vs. display: table)? I know it's been a while.

Where is the tablet styling supposed to come from? We're currently using this RL URL for the main part of the base CSS: https://en.wikipedia.org/w/load.php?debug=false&lang=en&skin=minerva&target=mobile&only=styles&modules=ext.cite.style%7Cext.math.styles%7Cext.pygments%7Cext.timeline.styles%7Cmediawiki.page.gallery.styles%7Cmediawiki.skinning.content.parsoid%7Cmobile.app%7Cmobile.app.parsoid%7Cskins.minerva.base.reset%7Cskins.minerva.content.styles

tables becoming scrollable when they don't fit is a default feature of mobile. It just looks worse now, because the tablet styling is not present.

The tablet styling is provided by module skins.minerva.tablet.styles

Do the apps bundle that module @bearND?

This is the relevant CSS from that module:

@media all and (min-width:720px){
  table.infobox{
    margin:0.5em 0 1em 35px !important;
    max-width:320px;width:auto !important;
    float:right !important;
    clear:right !important
  }
}

Maybe this should be on the pagelib CSS?

Maybe this should be on the pagelib CSS?

I was thinking we should add it to the base CSS since it's coming from RL. The pagelib CSS contains new rules specifically to make the DOM transformations of the pagelib look decent.

The Android app is consuming the https://en.wikipedia.org/api/rest_v1/data/css/mobile/base endpoint now for bundling their styles.
Before that it used the same list of modules we currently have in the base CSS endpoint. In fact we got that list from the apps code.

I've added this module to the locally to the base CSS output. While the infobox by itself looks better IMO since it doesn't have the horizontal scrollbar, the positioning seems off with regards to the collapsible table structure provided by the wikimedia-page-library on my tablet. Note the Close button right under the Quick facts. This makes it a regression in my book and requires more adjustment.

Before	After (with skins.minerva.tablet.styles module)

For sure, in the case of skins.minerva.tablet.styles, the behaviour of the UI when going to tablet mode is to float the infobox to the right.

How do the apps behave? (I don't have an android tablet) If they keep the infobox centered or even widened whatever the width, then we need to have different tablet styles on css/mobile/base. If they float the infobox to the right but at a different width, we need different CSS too.

In any case, it seems we can't use directly skins.minerva.tablet.styles but we may be able to adapt the mediaquery or take some of the styles (without the float) to make it behave.

How do the apps behave?

Here's a screenshot of the same infobox in the current production Android app on a Nexus 9 tablet in landscape orientation. I don't have an iPad but I think it should be similar since the infobox treatment comes from the CollapseTable transforms and its corresponding CSS in the wikimedia-page-library.
As you can see in the screenshot below, the infobox uses up the whole width of the content area.

So let's make it work like the apps need, and we can rise the issues with Design if it is not appropriate in the future.

The media query in the description:

@media all and (max-width: 720px) {
    .content table {
        display:block;
        width: 100% !important
    }

    .content caption {
        display: block
    }
}

Let's make it apply to all widths right now. If it comes from page library CSS, we can change it to apply to all widths, if it comes from mediawiki, we can add a snippet like it to page library CSS. Thoughts?

I believe the issue started with this patch: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/428868.

@Jhernandez I'm thinking making the necessary change in the wikimedia-page-library is probably safest since I don't want to affect MFE. The collapsing of the tables (and not floating the table as the web platforms do) in the page library affects this outcome, which is another reason to make this change in the page library.

(I'm not doing the caption one since it seems to make the display worse IMO.)

See PR 158 for more details.

In T201381#4530952, @bearND wrote:

I believe the issue started with this patch: https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/428868.

It's possible it introduced a bug as side-effect, but would need more details on what that side-effect is to be able to help.

The diff is quite trivial and should result in the same styling as before.

/* For mobile */
.content table {
	display: block;
	width: 100% !important;
	caption {
		display: block;
} }
/* Undo the above on tablet/desktop */
@media screen and ( min-width: @width-breakpoint-tablet ) {
	.content table {
		display: table;
		width: auto !important;
		caption {
			display: table-caption;
} } } }

/* For mobile only */
@media all and ( max-width: @width-breakpoint-tablet ) {
	.content table {
		display: block;
		width: 100% !important;
		caption {
			display: block;
} } }

@Krinkle I added you and @Jdlrobson mainly to increase awareness of how MinervaNeue CSS is used downstream by the apps for future CSS changes, and possibly review my PR that tries to fix this issue if you'd like.
For the future it would be great to get a heads-up of major changes in CSS (esp. for tables) or get some ideas for better testing this wrt to the apps usage. This will be even more important in the future when the apps get the CSS from the server instead of bundling with the apps. (But even with some testing when the apps update their CSS bundles this fell through the cracks.)

Both native apps collapse infobox tables by default (via common code in the wikimedia-page-library). The main contributing difference here though is that infoboxes don't float, instead they are designed to take up the whole width of the screen. (I'm not saying I particularly like this design decision for devices with larger widths but that's what it is right now.)

<div class="pagelib_collapse_table_container">
  <div class="pagelib_collapse_table_collapsed_container pagelib_collapse_table_collapsed pagelib_collapse_table_icon" style="display: block;"> 
    <strong>info box title</strong><span class="pagelib_collapse_table_collapse_text">: Domestic cat[1], Conservation status …</span></div>
      <table class="infobox biota" style="text-align: left; width: 200px; font-size: 100%; margin-top: 0px; margin-bottom: 0px; display: block;">

The page library PR has been merged and version 6.1.3 with it published.