Page MenuHomePhabricator
Create Task
Maniphest T349024

[mobile] Section level image suggestions: intro tour images do not fit viewport width
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
Sgs
Authored By
Etonkovidova
Oct 16 2023, 6:37 PM
Tags
Referenced Files
Restricted File
Dec 1 2023, 12:44 AM
Restricted File
Dec 1 2023, 12:44 AM
Restricted File
Dec 1 2023, 12:44 AM
Restricted File
Dec 1 2023, 12:44 AM
F41478477: Screenshot 2023-11-09 at 18.16.22.png
Nov 9 2023, 5:19 PM
F41478478: Screenshot 2023-11-09 at 18.16.28.png
Nov 9 2023, 5:19 PM
F41478479: Screenshot 2023-11-09 at 18.16.15.png
Nov 9 2023, 5:19 PM
F41478480: Screenshot 2023-11-09 at 18.16.09.png
Nov 9 2023, 5:19 PM
View All 14 Files
Subscribers
Aklapper
DMburugu
Etonkovidova
JFernandez-WMF
KStoller-WMF
Sgs
Urbanecm_WMF

Description

Notes:

  • the issue is split from this comment on T335209.
  • the intro tour for article level image suggestions displays images correctly

Screen Shot 2023-10-16 at 11.34.26 AM.png (1×754 px, 197 KB)

  • the issue is present only on mobile - the issue is displayed on viewport screens 360-412 px wide

Steps to replicate the issue

  • On mobile Homepage select "Add an image to an article section" task
  • Go to any of the suggested articles
  • The intro tour will be presented.

What happens?:

  • The intro tour displays images that do not fit viewport.

Screen Shot 2023-10-10 at 4.37.10 PM.png (1×768 px, 152 KB)

What should have happened instead?:

Software version :

  • wmf.30

Details

SubjectRepoBranchLines +/-
Section images: avoid onboarding images exceed viewport on mobilemediawiki/extensions/GrowthExperimentsmaster+9 -2
Customize query in gerrit

Related Objects

Event Timeline

Etonkovidova created this task.Oct 16 2023, 6:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 16 2023, 6:37 PM
Etonkovidova renamed this task from [mobiel] Section level image suggestions: intro tour images do not fit viewport width to [mobile] Section level image suggestions: intro tour images do not fit viewport width.Oct 16 2023, 6:38 PM
Etonkovidova mentioned this in T335209: Section-level images: suggestions mode.
KStoller-WMF attached a referenced file: F38191733: Screen Shot 2023-10-10 at 4.37.10 PM.png. (Show Details)Oct 16 2023, 8:28 PM
KStoller-WMF moved this task from Inbox to Backlog on the Growth-Team board.
KStoller-WMF triaged this task as Medium priority.Oct 16 2023, 9:37 PM
JFernandez-WMF subscribed.Oct 18 2023, 3:49 PM

@Sgs could this bug be related to what we discussed in T332925 and on Slack a while back? I remember us not having mobile-specific illustrations due to limited design resources for it. is that something that may have to do with this issue? happy to get on any design assets that may be needed for this!

Sgs added a comment.EditedNov 9 2023, 5:19 PM
In T349024#9262459, @JFernandez-WMF wrote:

@Sgs could this bug be related to what we discussed in T332925 and on Slack a while back? I remember us not having mobile-specific illustrations due to limited design resources for it. is that something that may have to do with this issue? happy to get on any design assets that may be needed for this!

Sorry to come late to this. Indeed, the mobile assets have the same size as desktop (360px x 216px) but much more horizontal gutter so they fit well in narrower screens by leaving part of that gutter outside the viewport, see below:

desktopmobile
desktop-onboarding-image2-ltr.svg5 KBDownload
onboarding-image2-ltr.svg5 KBDownload
Screenshot 2023-11-09 at 17.50.08.png (432×720 px, 25 KB)
Screenshot 2023-11-09 at 17.50.25.png (434×720 px, 27 KB)

The image not fitting in the viewport issue is due to the left/right shifting we performed trying to avoid the overlap between the image and the pager text. Since the shifting is being problematic on mobile I've pushed a quick fix that avoids the shift in any direction, the image remains centered; and I've pushed the image a bit down (24px, increasing the image background area) to avoid the pager overlap:

Screenshot 2023-11-09 at 18.16.09.png (1×724 px, 173 KB)
Screenshot 2023-11-09 at 18.16.15.png (1×736 px, 108 KB)
Screenshot 2023-11-09 at 18.16.28.png (1×738 px, 129 KB)
Screenshot 2023-11-09 at 18.16.22.png (1×746 px, 101 KB)

Let me know if you find this solution acceptable @KStoller-WMF @JFernandez-WMF

Ideally we would get mobile dedicated assets but I don't think it deserves a lot of effort right now since our final goal is to replace these dialogs by the Vue versions Viviana Yanez (former intern) implemented, see add image demo. The demo is using mobile assets in all platforms which is incorrect but the design does not present the pager overlap issue since the pager lives in a full width row.

gerritbot added a comment.Nov 9 2023, 5:23 PM

Change 973207 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Section images: avoid onboarding images exceed viewport on mobile

https://gerrit.wikimedia.org/r/973207

gerritbot added a project: Patch-For-Review.Nov 9 2023, 5:23 PM
Sgs claimed this task.Nov 9 2023, 5:29 PM
Sgs lowered the priority of this task from Medium to Low.
Sgs edited projects, added Growth-Team (Sprint 2 (Growth Team)); removed Growth-Team.
Sgs moved this task from Incoming to Code Review on the Growth-Team (Sprint 2 (Growth Team)) board.
KStoller-WMF added a comment.Nov 10 2023, 12:10 AM

Let me know if you find this solution acceptable

Looks good to me. Thanks!

JFernandez-WMF added a comment.Nov 10 2023, 12:25 AM

Also looks good to me, thank you Sergio!

KStoller-WMF edited projects, added Growth-Team (Sprint 3 (Growth Team)); removed Growth-Team (Sprint 2 (Growth Team)).Nov 14 2023, 2:46 PM
Sgs moved this task from Incoming to Code Review on the Growth-Team (Sprint 3 (Growth Team)) board.Nov 14 2023, 4:24 PM
Urbanecm_WMF moved this task from Code Review to QA on the Growth-Team (Sprint 3 (Growth Team)) board.Nov 14 2023, 10:55 PM
gerritbot added a comment.Nov 14 2023, 11:17 PM

Change 973207 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: avoid onboarding images exceed viewport on mobile

https://gerrit.wikimedia.org/r/973207

Maintenance_bot removed a project: Patch-For-Review.Nov 14 2023, 11:30 PM
ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.7; 2023-11-28).Nov 15 2023, 1:00 AM
Etonkovidova moved this task from QA to Test in Production on the Growth-Team (Sprint 3 (Growth Team)) board.EditedNov 17 2023, 5:25 PM

Checked in betalabs - the fix is in place; need to check in wmf.7.

The screenshots are from cswiki mobile wmf.7:

{F41549925}{F41549926}{F41549927}{F41549928}
Etonkovidova closed this task as Resolved.Dec 1 2023, 12:44 AM
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