1833128 - [Experiment] The primary and secondary buttons from the FxA device migration slide are displayed one after another without space in between

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

Attachment: QA-1847-treatment-c.png

[Affected versions]:

• Firefox Release 113.0 - Build ID: 20230504192738
• Firefox Beta 114.0b4 - Build ID: 20230514175823
• Firefox Nightly 115.0a1 - Build ID: 20230514213610

[Affected Platforms]:

• Windows 10 x64
• Windows 11 x64

[Prerequisites]:

• Have a new Firefox Profile.
• Have the nimbus.debug pref set to true.

[Steps to reproduce]:

1. Open the browser from the prerequisites.
2. Copy and paste the following link in a new tab: about:studies?optin_slug=prompt-fxa-creation-after-import&optin_branch=treatment-c&optin_collection=nimbus-preview
3. Open a new tab and navigate to the about:welcome page.
4. Skip all slides until you get to the device migration one.
5. Observe the Primary and Secondary buttons.

[Expected result]:

• The Primary button is displayed above the Secondary button.

[Actual result]:

• The buttons are displayed on the same line without any space between them.

[Notes]:

• The issue is not reproducible on the control, treatment-a, or treatment-b branches.
• Attached is a screenshot of the issue.

Comment 1

[Emily McMinn :emcminn]

Adjusted the padding on the primary buttons & updated the recipe. All buttons should be correctly aligned now :)

Comment 2

[Ciprian Muresan [:cmuresan], Formerly of Ecosystem QA - please needinfo @mcoman for things regarding the team]

Thanks for the quick fix @Emily!

I have verified that the issue is no longer reproducible on Firefox Release 113.0 using Windows 10 and 11. The buttons are now displayed just like in the Figma document.