A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://phabricator.wikimedia.org/T113101 below:

⚓ T113101 Images should be responsive in Vector and restrained to a max-size.

Background

All images wider than #content 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.

User story

As a reader I want article images to fit within the available viewport space at all times for all skins.

Acceptance criteria QA in beta QA Requirement

Ensure images are responsive and restrained to a max-size in the Vector skin, avoiding overflow issues and enhancing compatibility across different skins. Test this functionality in both beta and production environments.

BDD 
gherkin
Feature: Responsive Images in Vector

  Scenario: Ensure images are responsive and fit within the available viewport
    Given the user is viewing a page in the Vector skin
    When an image is displayed
    Then the image should be responsive and restrained to a max-size
    And the image should not overflow or overlap other content
Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. AC1: Confirm that images resize appropriately as the window shrinks.
  5. AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

Production Links:

Notes

Videos are already OK:

Roll back plan

This change will be rolled out with style improvements for tables, infoboxes, hatnotes and images that improve how they display for mobile screens.

In case of unforeseen issues with tables/images, that severely damage the readability of the wiki per our criteria for rolling back the train we can revert the following patch safely at any given time to prompt more conversation/iteration:
https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/1038894

QA Results - Beta QA Results - PROD Event Timeline Comment Actions

Options for this one:

 Comment Actions Test Result - Beta

Status: ❌ FAIL
Environment: Beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. ❌ AC1: Confirm that images resize appropriately as the window shrinks.
  5. ✅ AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

Production Links:

 Comment Actions

I think the no resize behaviour might be broken now, due to lack of specificity compared to the other statements?

And the width calculation doesn't account for the border yet, so it's 2px too big

 Comment Actions

@Jdlrobson Can you please review AC1 and AC3?
UPDATE: As mentioned in the Task sync meeting, AC1 and AC3 are working as designed

Test Result - Beta

Status: ✅ PASS
Environment: Beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. ✅ AC1: Confirm that images resize appropriately as the window shrinks.
  5. ✅ AC2: Confirm that images are constrained to the container and do not overlap other content.

Beta Links:

Production Links:

 Comment Actions

@Jdlrobson @Edtadros Can you please review the NMI section and let me know how I should proceed, thanks!

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Responsive Images in Vector Skin

  1. Enable the responsive images feature.
  2. For beta testing, use the links in the beta links table. For production testing, use the links in the production links table.
  3. Resize the browser window to verify image responsiveness.
  4. ✅ AC1: Confirm that images resize appropriately as the window shrinks.
  5. ✅ AC2: Confirm that images are constrained to the container and do not overlap other content.

Production Links:

❓ NMI- The image moves fine but the wording is overlapping as seen in the gif in #3. I'm not sure if you want this on this task as a fail or pass since the image moves fine. Please let me know how I should proceed, thanks!

UPDATE: Will be resolved in T113101#9894649
https://ru.wikipedia.org/wiki/%D0%A2%D1%83%D1%80%D1%86%D0%B8%D1%8F

 Comment Actions

❓ NMI- The image moves fine but t

You can ignore that. This is a known issue with legacy Vector and it's not intended to be used at this screen resolution, so not a problem we are likely to fix. You can treat this one as a pass! Thank you!

 Comment Actions

Hello @Jdlrobson, this change has caused the images in the navbox to not display (max-width: 100% !important;), for example, in the template "Đơn vị hành chính cấp tỉnh Việt Nam" on viwiki. Is there any way to fix this issue?

Current

After disabled max-width: 100% !important;

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

 Comment Actions

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

The issue was fixed yesterday, about 8 hours before you posted, but it seems that the anonymous cache of the CSS hasn't expired yet. If you load the url with ?debug=true, you should note it is fine.

 Comment Actions

Note: This issue only appears on the old parser, while Parsoid does not have this problem.

The issue was fixed yesterday, about 8 hours before you posted, but it seems that the anonymous cache of the CSS hasn't expired yet. If you load the url with ?debug=true, you should note it is fine.

Thanks!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4