Steps to replicate the issue (include links if applicable):
- Make sure you are viewing the desktop site
- Resize window for mobile display (400px)
- Visit a page with [[File:Duluth,_South_Shore_&_Atlantic_Railway_-_System_Index_Map.jpg]] on it and open the media viewer e.g.
What happens?:
What should have happened instead?:
Should be stacked rather than squished
QA steps beta
QA steps production
Requirement
Media Viewer (MMV) must render correctly when viewed on narrow viewport widths on the desktop site. When resized to ~400px, MMV content must stack vertically instead of being squished horizontally. This behavior must be consistent on both beta and production environments.
BDD
Feature: Media Viewer responsive behavior on narrow desktop viewport
Scenario: Media Viewer on ~400px desktop viewport
Given I am on the desktop site
And I resize the window to ~400px width
When I open Media Viewer for an image
Then the Media Viewer layout must stack vertically
And content must not be squished horizontallyTest Steps
Test Case 1: Verify MMV behavior on beta site
- Navigate to https://en.wikipedia.beta.wmcloud.org/wiki/T378431 on production visit https://en.wikipedia.org/wiki/Duluth,_South_Shore_and_Atlantic_Railway
- Resize browser window to ~400px width
- Open the Media Viewer for the file
- AC1: MMV content stacks vertically instead of being squished
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T378431#11183560 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T378431#11231742 |
Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
