From OTRS: https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=11390663
Tested on 6.6, still occurring.
Article "Sojourner (rover)": [[ https://en.wikipedia.org/wiki/Sojourner_(rover)#Sojourner's_location_in_context | desktop web ]] (ok),
[[ https://en.m.wikipedia.org/wiki/Sojourner_(rover)#Sojourner's_location_in_context | mobile web ]] (overlap),
[[ https://en.wikipedia.org/api/rest_v1/page/html/Sojourner_(rover)#Sojourner's_location_in_context | parsoid ]] (ok), [[ https://en.wikipedia.org/api/rest_v1/page/mobile-html/Sojourner_(rover)#Sojourner's_location_in_context | mobile-html ]] (overlap)
{F31837483}
=== Observations:
The problem is only visible for device/browser widths <= 720px.
The problem is also visible direclty in the template:
https://en.wikipedia.org/api/rest_v1/page/mobile-html/Template:Mars_map
Removing this rules from hacks.less fixes the problem here:
```lang=less
// Deal with Template:Multiple_image. T38030 and T148505
.thumb .thumbinner {
.flex-display( flex );
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
// avoid image child overflowing the container (T200518)
// stylelint-disable-next-line declaration-block-no-redundant-longhand-properties
flex-direction: column;
> .thumbcaption {
.flex( 1, 0, 100% );
display: block;
}
}
```
Turning off `display: flex` avoids this overlap.