NOTE: communities can workaround this by adding [[ https://en.wikipedia.org/wiki/MediaWiki:Vector-2022.css#L-29-31 | a rule to MediaWiki:Vector-2022.css ]]. We hope to have a proper fix in place by end of day Monday.
== Background
Our styles for responsive images are applying in places they don't need to apply and in some cases resulting in the image disappearing (usually inside table based or flex based layouts). This has been a longstanding issue on mobile where images are lazy loaded (details in T338110).
== User story
As an editor I don't want my templates impacted by responsive image changes and to be trusted to handle that myself inside the template.
== Requirements
[] Images inside tables should not be subject to modification
[] Opt out should be easier - height and image set by CSS should not be overriden e.g. template editors should not have to apply `!important` inside templates to override rules.
=== BDD
- For QA engineer to fill out
=== Test Steps
NOTE: For QA engineer to review.
1) Image sizes in the following examples should be the same in Vector as Vector 2022:
* https://en.wikipedia.org/wiki/Wikipedia:2009_Top_50_Report
* https://en.wikipedia.org/wiki/List_of_public_art_in_the_London_Borough_of_Ealing#Ealing
* https://en.wikipedia.beta.wmflabs.org/wiki/T367463
* https://eu.wikipedia.org/wiki/Azala with Vector 2022 enabled
* https://meta.wikimedia.org/wiki/AvoinGLAM
2) Run the QA steps in T338110 on mobile
== Design
N/A
== Acceptance criteria
[] All examples in https://en.wikipedia.beta.wmflabs.org/wiki/T367463#Images_that_should_not_alter_size_when_the_browser_window_is_resized must match their specified behaviour.
== Communication criteria - does this need an announcement or discussion?
Yes. Run a #user-notice so editors know where to flag any new issues.
== Rollback plan
If necessary, we can do a full revert of responsive behaviour if after this fix, we still find issues with the existing implementation.
//This task was created by Version 1.0.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //
== Original bug report
**Steps to replicate the issue** (include links if applicable):
* Visit https://en.wikipedia.org/wiki/Template:Donald_Trump_series
**What happens?**:
There's a really small https://en.wikipedia.org/wiki/File:Donald_Trump_official_portrait_(3x4a).jpg on the left in the header
{F55294175}
**What should have happened instead?**:
Should be wide enough to be visible :) From archive:
{F55294185}
**Software version** (on `Special:Version` page; skip for WMF-hosted wikis like Wikipedia):
**Other information** (browser name/version, screenshots, etc.):
Deliberately separate from {T367462} since I don't know what the best solution is here. Limiting the issue by screen width may be as valid as there, at least in the interim, but I know there was a desire for images to be available everywhere due to the "unresponsive wide things go out the right" issue.
Maybe worth a see also to {T282588}.
Onwiki discussion: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Thursday_13_June_style_changes
# On wiki fixes
For wikis encountering the same issue, you can apply these styles locally to address the issue. The benefit of this is that it will also fix display in mobile site.
* Sidebar https://en.wikipedia.org/w/index.php?title=Module%3ASidebar%2Fstyles.css&diff=1228898189&oldid=1228886537
* Navboxes https://en.wikipedia.org/w/index.php?title=Module%3ANavbox%2Fstyles.css&diff=1228936124&oldid=1061467846
* tmbox https://en.wikipedia.org/w/index.php?title=Module%3AMessage_box%2Ftmbox.css&diff=1228936760&oldid=1097618699
* `.smallbox img` https://meta.wikimedia.org/w/index.php?title=Template%3AAvoinGLAM%2Fstyle.css&diff=26938566&oldid=26937631
== Sign off steps
[] Undo https://en.wikipedia.org/wiki/MediaWiki:Vector-2022.css#L-29-31