Steps to replicate the issue (include links if applicable):

• Open a page, using the Minerva skin, that have images that don't have the align explicitly set (e.g. https://nl.m.wikipedia.org/wiki/Grafgalerij)
• Widen the page if needed to activate the tablet styles, so that images display on their respective position instead of in the center of the page

What happens?:

The images are displayed too close to the text due to the lack of a left (in a LTR setting) margin.

What should have happened instead?:

Images that have no align parameter should display the same as images that have the explicit right align set (the .mw-halign-right CSS class)

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

MacOS 15.1, Safari 18.1

Derived Requirement

Ensure that images without an explicit align parameter in the Minerva skin have a left margin (in LTR settings) on tablet and larger displays. These images should appear with the same margin as images explicitly set to align right (using the .mw-halign-right CSS class) to prevent text from appearing too close to the image.

BDD

gherkin
Feature: Proper Margin for Images Without Explicit Align Parameter on Tablet and Larger Displays

Scenario: Display images without explicit align parameter with a left margin on tablet and larger displays
  Given the user is viewing an article in the Minerva skin on a tablet or larger display
  And the article contains images without an explicit align parameter
  When the images are displayed on the page
  Then each image should have a left margin, appearing the same as images with right alignment (.mw-halign-right CSS class)

Test Result - Beta|Prod

Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: beta/xyzwiki
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: Tablet

Test Artifact(s):

Test Steps

Test Case 1: Ensure Images Without Align Parameter Have Left Margin on Tablet and Larger Displays

1. Open Wikipedia in the Minerva skin.
2. Navigate to a page with images that do not have an explicit align parameter (e.g., Grafgalerij).
3. Adjust the window width to activate tablet styles, ensuring images display on the side rather than centered.
4. ✅❓❌⬜ AC1: Confirm that each image without an explicit align parameter has a left margin, matching the margin of images with right alignment (using .mw-halign-right CSS class).

QA Results - Beta

QA Results - PROD