Page MenuHomePhabricator
Create Task
Maniphest T249291

Misaligned donation amounts buttons on Galaxy S7/S8/S9/Note3
Closed, DeclinedPublic
Actions

Assigned To
EWilfong_WMF
Authored By
• jbolorinos-ctr
Apr 2 2020, 10:53 PM
Tags
Referenced Files
F31741194: FireShot Screen Capture #130 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png
Apr 7 2020, 8:00 PM
F31741196: FireShot Screen Capture #129 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png
Apr 7 2020, 8:00 PM
F31741155: image.png
Apr 7 2020, 7:35 PM
F31741153: image.png
Apr 7 2020, 7:35 PM
F31741151: image.png
Apr 7 2020, 7:35 PM
F31741163: image.png
Apr 7 2020, 7:35 PM
F31737280: image.png
Apr 6 2020, 7:27 PM
F31724789: image.png
Apr 2 2020, 10:56 PM
View All 9 Files
Subscribers
EWilfong_WMF
• jbolorinos-ctr
scervantes
spatton

Description

Summary:
The buttons are misaligned in the donation amounts section on Galaxy S9, S8, S7, Note3 phones. See attached image

Galaxy S9/Android 9.0/Chrome Mobile 80

image.png (1×288 px, 214 KB)

Galaxy S8/Android 8.0/Chrome Mobile 75

image.png (1×288 px, 203 KB)

Galaxy S7/Android7.0/Chrome Mobile 73

image.png (1×290 px, 219 KB)

Note 3/Android4.4/Chrome Mobile 58

image.png (5×1 px, 632 KB)

Steps to Reproduce:

  1. Open https://sv.m.wikipedia.org/wiki/Wikipedia?banner=B1920_0407_svSE_m_p2_sm_twin1&country=SE on a Galaxy S9/S8/S7/Note 3 phone
  2. Observe misalignment of donation amount buttons

Actual Results:
Currently the donation amounts buttons appear misaligned (see screenshots)

Expected Results:
These buttons should appear as they do on other browsers/devices

Updated description with more details

Related Objects

Event Timeline

• jbolorinos-ctr created this task.Apr 2 2020, 10:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 2 2020, 10:53 PM
• jbolorinos-ctr triaged this task as Low priority.Apr 2 2020, 10:56 PM
• jbolorinos-ctr updated the task description. (Show Details)
• jbolorinos-ctr removed a subscriber: Aklapper.
EWilfong_WMF added a comment.Apr 6 2020, 3:14 PM

@jbolorinos-ctr - Can you confirm if this is an issue on the control mobile small banner? Also, could you check the mobile large control banner as well as that is where this banner code was pulled from? Thanks.

• jbolorinos-ctr added a comment.Apr 6 2020, 7:27 PM

Yes the buttons layout issue is also present on Current Best - Mobile Small - https://en.m.wikipedia.org/wiki/Wikipedia?banner=B1920_0315_mlWW_m_p2_sm_template&country=US so I'll update the title to remove "Test Variant" as this is affecting control also (see screenshot below)

image.png (1×540 px, 372 KB)

Also, after double checking on Current Best - Mobile Large, I can confirm this issue is not affecting that banner.

• jbolorinos-ctr renamed this task from Misaligned payment method and donation amounts buttons on Galaxy S7/S8 - Test Variant to Misaligned payment method and donation amounts buttons on Galaxy S7/S8.Apr 6 2020, 7:27 PM
spatton subscribed.Apr 7 2020, 3:58 PM

Thanks for tracking this @jbolorinos-ctr, could you check mobile small in our Sweden controls, specifically: Swedish Sweden preview & English Sweden preview?

It'd be great for this to happen asap bc we are planning to enable the banners as early as tomorrow.

EWilfong_WMF added a comment.Apr 7 2020, 4:33 PM

@jbolorinos-ctr, do you know what version of Android and Chrome this test is using? Trying to reproduce to debug.

• jbolorinos-ctr raised the priority of this task from Low to Medium.Apr 7 2020, 7:28 PM

@EWilfong_WMF Yes here are the version details:

OS: Android 9.0, 8.0, 7.0, 4.4
Browser: Chrome Mobile 58, 73, 75, 80

@spatton confimed this issue is observable on this url - https://sv.m.wikipedia.org/wiki/Wikipedia?banner=B1920_0407_svSE_m_p2_sm_twin1&country=SE

• jbolorinos-ctr renamed this task from Misaligned payment method and donation amounts buttons on Galaxy S7/S8 to Misaligned donation amounts buttons on Galaxy S7/S8/S9/Note3.Apr 7 2020, 7:35 PM
• jbolorinos-ctr updated the task description. (Show Details)
• jbolorinos-ctr updated the task description. (Show Details)
spatton added a subscriber: scervantes.Apr 7 2020, 8:00 PM
EWilfong_WMF added a comment.Apr 7 2020, 8:00 PM

@jbolorinos-ctr - Can you provide a screenshot of how this looks on that Swedish URL? Does it not occur on the English version?

I can't recreate the issue on browserstack.com and I don't have a crossbrowsertesting.com account, so I'm a bit at a loss on how to debug this. On browserstack.com, I am seeing the following on a Galaxy S8, Android 7, Chrome Mobile 80:

FireShot Screen Capture #130 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png (1×1 px, 348 KB)

FireShot Screen Capture #129 - 'Dashboard' - live_browserstack_com_dashboard#os=android&os_version=7_0&device=Samsung+Galaxy+S8&device_browser=chrome&.png (1×1 px, 139 KB)

• jbolorinos-ctr updated the task description. (Show Details)Apr 7 2020, 8:51 PM
• jbolorinos-ctr updated the task description. (Show Details)
• jbolorinos-ctr mentioned this in T249662: Button Spacing issue on Payment Options - Mobile Small banner.Apr 7 2020, 9:01 PM
• jbolorinos-ctr closed this task as Declined.Apr 7 2020, 9:11 PM

Closing this task as Declined, since the donation amount buttons change grid shape depending on the resolution of the mobile device, so this is by design and not a bug.

Thanks for the clarification on this @spatton!

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