UI issues in the Devices screen while on small screens mobile devices

mozilla-mobile / mozilla-vpn-client

A fast, secure and easy to use VPN. Built by the makers of Firefox.

https://vpn.mozilla.org

Other

454 stars 110 forks source link

UI issues in the Devices screen while on small screens mobile devices #8454

Closed data-sync-user closed 10 months ago

data-sync-user commented 10 months ago

Important details:

The issue is only reproducible on small screens devices (i.e. Google Pixel);

Affected versions:

2.19.0 (2.202311020749);

Tested Platforms:

Android 10;

Prerequisites:

Have a Fx account with an active subscription for Mozilla VPN
Have Mozilla VPN app freshly installed and opened;
Have the new “Onboarding” feature flag enabled
Be in any of the new onboarding screens

Steps to reproduce:

Navigate to the Devices screen;
Observe the screens;

Expected result:

There are no UI issues;

Actual result:

The “Next” button and QR code are overlapping;

┆Issue is synchronized with this Jira Bug ┆Reporter: Valentina Virlics

data-sync-user commented 10 months ago

➤ Valentina Virlics commented:

The “Connect” screen was fixed by https://github.com/mozilla-mobile/mozilla-vpn-client/pull/8402#event-10846888502 ( https://github.com/mozilla-mobile/mozilla-vpn-client/pull/8402#event-10846888502|smart-link ) , while using Mozilla VPN 2.19 (2.202311021719) build on Android 10 - Google Pixel.

Updating the ticket accordingly.

!Screenshot_20231103-102740.png|width=1080,height=1920!

data-sync-user commented 10 months ago

➤ Raluca Monica Ilban commented:

The "Install Mozilla VPN on up to 5 devices" has UI issues for some languages (e.g. French, Polish) on Android 11 - Pixel 2 XL - using build 2.19.0 (2.202311021719). The QR Code and the Next button overlap, please see the screenshot attached.

!1699010757594.JPEG|width=720,height=1440!

data-sync-user commented 10 months ago

➤ Santiago Andrigo commented:

Raluca Monica Ilban Valentina Virlics can users scroll down to see the full QR code?

data-sync-user commented 10 months ago

➤ Valentina Virlics commented:

Santiago Andrigo Nope, the button and the QR code remain overlapped.

Attaching video.

!eRecorder_84602.mp4|width=720,height=1280!

data-sync-user commented 10 months ago

➤ Santiago Andrigo commented:

Thanks, keeping as high and as a feature blocker then.

data-sync-user commented 10 months ago

➤ Valentina Virlics commented:

Verified this as fixed on Google Pixel/ Android 10, using Mozilla VPN 2.19 (2.202311132219).

The QR code and the Next button do not overlap anymore.

!Screenshot_20231114-105232.png|width=1080,height=1920!

data-sync-user commented 10 months ago

➤ Santiago Andrigo commented:

Matt Lichtenstein points please? 🙂