== Background
All images wider than `#content` [[https://test.wikipedia.org/wiki/User:Abi%C3%A1n/sandbox|overflow]]. This is a solved problem on Timeless, Monobook and Minerva and it is time we applied a global solution for all skins. In some articles, in Vector 2022 the images overlap the side bar, and communities insist that this should be considered a blocker for rolling out Vector 2022 as the default.
For example:
https://en.wikipedia.beta.wmflabs.org/wiki/T113101
This adapts in Minerva and is generally not an issue with legacy Vector which does not have a sidebar on the right, but in Vector 2022 it overlaps the content area.
{F54796098}
== User story
As a reader I want article images to fit within the available viewport space at all times for all skins.
# Acceptance criteria
[] Limit floating rules in [[ https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.media-common.less#L18C1-L34C3 | mediawiki.skinning ]] to`@media screen and ( min-width: @width-breakpoint-tablet ) {`
[] Move the thumbnail styles that make images full screen on mobile from [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/content/images.less#L49C1-L72C3 | from Minerva ]] to [[ https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.thumbnails-common.less | mediawiki.skinning ]] so they apply to Vector 2022 and Minerva skin.
[] Replace the `#content` selector with `body.skin--responsive .mw-parser-output`
[] Once the above is merged add skin--responsive to the BODY element on Vector 2022 (this is our rollback strategy in case of an issue)
[] Post a patch to Minerva that removes reference to the noresize class added in T330527 and the styles you have upstreamed to core as part of this task.
# QA in beta
[] Visit https://en.wikipedia.beta.wmflabs.org/wiki/Adam?useskin=vector and resize browser, the image **should not** resize as the window shrinks
[] Visit https://en.wikipedia.beta.wmflabs.org/wiki/Adam?useskin=vector-2022 and resize browser, the image **should** resize as the window shrinks
[] Check Parsoid HTML compatibility: Visit https://en.wikipedia.beta.wmflabs.org/wiki/T310286 and edit using VisualEditor. Make sure the image is constrained to the container (see T310286)
# QA
[] Visit https://en.wikipedia.org/wiki/The_Creation_of_Adam?useskin=vector and resize browser, the image **should not** resize as the window shrinks
[] Visit https://en.wikipedia.org/wiki/The_Creation_of_Adam?useskin=vector-2022 and resize browser, the image **should** resize as the window shrinks
## Notes
Videos are already OK:
* https://meta.wikimedia.org/w/index.php?title=User:Valerio_Bozzolan/Sandbox2&oldid=23877269