GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing phabricator.wikimedia.org — T113101 Images should be responsive in Vector and restrained to a max-size.
Assigned To Authored By
Project Tags Referenced Files
Description BackgroundAll 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: 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 storyAs 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
RequirementEnsure 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. BDDgherkin
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 contentTest StepsTest Case 1: Verify Responsive Images in Vector Skin
Beta Links:
Production Links:
NotesVideos are already OK: Roll back planThis 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: QA Results - Beta
QA Results - PROD
Details
Related Changes in Gerrit: Customize query in gerrit
Related Objects Search...
Event TimelineThere are a very large number of changes, so older changes are hidden. Show Older Changes Comment Actions Change #1034636 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/skins/Timeless@master] Responsive style for images was upstreamed to core Comment Actions Change #1034637 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/skins/MinervaNeue@master] Responsive style for images was upstreamed to core Jdlrobson updated the task description. (Show Details)May 23 2024, 9:10 PM2024-05-23 21:10:16 (UTC+0) Jdlrobson edited projects, added: Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5); removed: Web-Team-Backlog-Archived.May 23 2024, 9:20 PM2024-05-23 21:20:52 (UTC+0) Jdlrobson moved this task from Needs analysis to Ready for Development on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Comment Actions Change #1035595 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/skins/Vector@master] Increase bundle size limit to support responsive behaviours Comment Actions Change #1035817 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/skins/MinervaNeue@master] WIP: Clean up Minerva image styles Jdlrobson moved this task from Ready for Development to Ready for estimation on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board.May 30 2024, 6:07 PM2024-05-30 18:07:52 (UTC+0) Jdlrobson updated the task description. (Show Details)May 31 2024, 2:36 PM2024-05-31 14:36:21 (UTC+0) Jdlrobson raised the priority of this task from Medium to High.May 31 2024, 8:07 PM2024-05-31 20:07:21 (UTC+0) Jdlrobson moved this task from Ready for estimation to Ready for Development on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Jdlrobson updated the task description. (Show Details)Jun 3 2024, 9:20 PM2024-06-03 21:20:45 (UTC+0) Comment Actions Change #1035595 merged by jenkins-bot: [mediawiki/skins/Vector@master] [Vector 2010] Increase bundle size limit for responsive behaviours Jdlrobson moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Comment Actions Change #1038894 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/skins/Vector@master] Make Vector 2022 pseudo-responsive Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board.Jun 4 2024, 9:20 PM2024-06-04 21:20:30 (UTC+0) Jdlrobson removed Jdlrobson as the assignee of this task.Jun 4 2024, 9:32 PM2024-06-04 21:32:35 (UTC+0) Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Jdlrobson reassigned this task from Jdlrobson to Jdrewniak.Jun 10 2024, 5:41 PM2024-06-10 17:41:09 (UTC+0) Comment ActionsOptions for this one:
Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board.Jun 10 2024, 5:41 PM2024-06-10 17:41:54 (UTC+0) Comment Actions Change #1034607 merged by jenkins-bot: [mediawiki/core@master] Skin: Responsive images is a core feature for responsive skins Comment Actions Change #1038894 merged by jenkins-bot: [mediawiki/skins/Vector@master] Make Vector 2022 pseudo-responsive Jdlrobson updated the task description. (Show Details)Jun 10 2024, 10:42 PM2024-06-10 22:42:43 (UTC+0) Jdlrobson reassigned this task from Jdrewniak to Edtadros.Jun 10 2024, 10:47 PM2024-06-10 22:47:26 (UTC+0) Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Edtadros updated the task description. (Show Details)Jun 10 2024, 11:53 PM2024-06-10 23:53:04 (UTC+0) Edtadros removed Edtadros as the assignee of this task.Jun 11 2024, 1:58 AM2024-06-11 01:58:58 (UTC+0) Edtadros moved this task from QA to Ready for Signoff on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Edtadros subscribed. Comment ActionsTest Result - BetaStatus: ❌ FAIL Test Artifact(s): Test StepsTest Case 1: Verify Responsive Images in Vector Skin
Beta Links:
Production Links:
Comment Actions Change #1041318 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/core@master] Don't squish images in non-responsive skin Comment Actions Change #1041318 merged by jenkins-bot: [mediawiki/core@master] Don't squish images in non-responsive skins e.g. Vector 2010 ReleaseTaggerBot edited projects, added: MW-1.43-notes (1.43.0-wmf.10; 2024-06-18); removed: MW-1.43-notes (1.43.0-wmf.9; 2024-06-11).Jun 11 2024, 8:00 AM2024-06-11 08:00:43 (UTC+0) 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 Change #1041674 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson): [mediawiki/core@wmf/1.43.0-wmf.9] Don't squish images in non-responsive skins e.g. Vector 2010 Jdlrobson moved this task from Ready for Signoff to QA on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Comment ActionsEdward could you please repeat the QA? Thanks in advance! Comment Actions Change #1041674 merged by jenkins-bot: [mediawiki/core@wmf/1.43.0-wmf.9] Don't squish images in non-responsive skins e.g. Vector 2010 Comment Actions Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:39:43Z] <cjming@deploy1002> Started scap: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]] Comment Actions Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:42:21Z] <cjming@deploy1002> cjming, jdlrobson: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug) Comment Actions Mentioned in SAL (#wikimedia-operations) [2024-06-12T20:52:35Z] <cjming@deploy1002> Finished scap: Backport for [[gerrit:1041674|Don't squish images in non-responsive skins e.g. Vector 2010 (T113101)]] (duration: 12m 52s) ReleaseTaggerBot edited projects, added: MW-1.43-notes (1.43.0-wmf.9; 2024-06-11); removed: MW-1.43-notes (1.43.0-wmf.10; 2024-06-18).Jun 12 2024, 9:00 PM2024-06-12 21:00:21 (UTC+0) Comment Actions @Jdlrobson Can you please review AC1 and AC3? Test Result - BetaStatus: ✅ PASS Test Artifact(s): Test StepsTest Case 1: Verify Responsive Images in Vector Skin
Beta Links:
Production Links:
GMikesell-WMF removed Edtadros as the assignee of this task.Jun 13 2024, 5:15 PM2024-06-13 17:15:23 (UTC+0) GMikesell-WMF moved this task from QA to Ready for Signoff on the Web-Team-Backlog-Archived (FY2023-24 Q4 Sprint 5) board. Jdlrobson claimed this task. Comment Actions @Jdlrobson @Edtadros Can you please review the NMI section and let me know how I should proceed, thanks! Test Result - PRODStatus: ✅ PASS Test Artifact(s): Test StepsTest Case 1: Verify Responsive Images in Vector Skin
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  GMikesell-WMF updated the task description. (Show Details)Jun 14 2024, 7:32 PM2024-06-14 19:32:26 (UTC+0) Comment Actions
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
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
Thanks! Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| You are visitor 01402503 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. |
