The experiments platform icons are wrongly displayed on "RTL" locales - Githubissues

mozilla / testpilot

Test Pilot is a platform for performing controlled tests of new product concepts in Firefox

https://testpilot.firefox.com/

251 stars 123 forks source link

The experiments platform icons are wrongly displayed on "RTL" locales #4007

Open Softvision-RemusDranca opened 5 years ago

Softvision-RemusDranca commented 5 years ago

[Affected versions]:

Firefox Release 64.0 and above

[Affected Platforms]:

All Windows
All Mac
All Linux

[Prerequisites]:

Have a Firefox [ar] locale build installed.
Have a new Firefox profile created.

[Steps to reproduce]:

Open the browser with the profile from prerequisites.
Navigate to "https://testpilot.firefox.com/".
Observe the platform icons displayed on the experiments cards.
Click on any of the experiments card.
Observe the platform icon displayed on the "Install Test Pilot & Enable [experiment_name]" button.

[Expected result]:

Step 3: There is a padding area between the experiment name and the icon.
Step 5: The icon is correctly displayed.

[Actual result]:

Step 3: There is no padding between the experiment name and the platform icon.
Step 5: The platform icon overlaps the "Install Test Pilot & Enable [experiment_name]" string.

[Notes]:

This issue is reproducible on all experiments from Test Pilot.
A similar behavior can be observed for the following elements from the page: The social network icons from the footer of the page also lack the padding area between them The padding is also not set between the icons from the "Brought to you by" (contributor's avatar and the name/title).
Attached are screenshots of the issue: