Open Bug 1938383 Opened 2 months ago Updated 9 days ago

[Rollout] The radio buttons from the “Microsurvey: sidebar CSAT and productivity” rollouts are misaligned with the text of the survey options

Categories

(Firefox :: Messaging System, defect, P1)

Desktop
All
defect

Tracking

()

Iteration:
137.1 - Feb 3 - Feb 14
Tracking Status
firefox134 --- affected

People

(Reporter: cfat, Assigned: asafko)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Attached image misalignment.jpg

[Affected versions]:

  • Firefox Beta 134.0b10 Build ID: 20241213091550

[Affected Platforms]:

  • Windows 10 x64
  • Ubuntu 22.04 x64

[Prerequisites]:

  • Have a Firefox Beta 134.0b10 build installed with the channel changed to “release”.
  • Client is enrolled in the "Existing users: Sidebar + GenAI" experiment.
  • Have a profile with the "nimbus.debug" pref set to true in the "about:config" page.

[Steps to reproduce]:

  1. Open the browser using the profile from the prerequisites.
  2. Navigate to the "about:studies?optin_slug=134-sidebar-microsurvey&optin_branch=control&optin_collection=nimbus-preview" URL.
  3. Go to the bottom-left part of the screen and click the "History" sidebar button.
  4. Open and close the “History” section for 4 more times.
  5. Observe the sidebar CSAT Microsurvey radio buttons.

[Expected result]:

  • The radio buttons are evenly aligned with the text of the survey options.

[Actual result]:

  • The radio buttons are slightly above the text of the survey options with several pixels.

[Notes]:

  • This issue is reproducible on all 3 screens of the sidebar CSAT Microsurvey.
  • This issue is reproducible with both the left and right side microsurveys.
  • Attached is a screen shot of the issue.

I cannot reproduce this with either of the surveys, and I am not sure what could be causing this.
Kelly, I wonder if you have an idea of what could be the culprit in here?
Here's the full recipe and this is how JSON for individual buttons looks like:

"data": [ { "id": "radio-very-dissatisfied", "type": "radio", "group": "radios", "icon": { "style": { "width": "14px", "height": "14px", "marginInline": "0 0.5em" } }, "label": { "string_id": "sidebar-callout-survey-very-dissatisfied-2" }, "action": { "type": "SET_PREF", "data": { "pref": { "name": "messaging-system-action.sidebar-satisfaction-jan-2025", "value": "very-dissatisfied" } } } },

Flags: needinfo?(kcochrane)
Attached image Windows

I also wasn't able to reproduce this (on Win at least), but we're going to see if we can add align-items: center on the .checkbox-container element to make sure this looks vertically aligned on all platforms.

Flags: needinfo?(kcochrane)

Ni @Carmen, Is this bug still reproducible?

Flags: needinfo?(cfat)
Assignee: nobody → asafko
Iteration: --- → 135.3 - Dec 23 - Jan 3
Priority: -- → P1

@Ania Please close this bug if it's no longer reproducible, thanks!

The issue is still reproducible on my side, on Firefox RC 134.0 (Build ID: 20241230151726), Windows 10 x64.

Flags: needinfo?(cfat)
Iteration: 135.3 - Dec 23 - Jan 3 → 136.1 - Jan 6 - Jan 17
Iteration: 136.1 - Jan 6 - Jan 17 → 136.2 - Jan 20 - Jan 31
Iteration: 136.2 - Jan 20 - Jan 31 → 137.1 - Feb 3 - Feb 14
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: