Bug Description

• Frequency control titles overflow in narrow viewports
• Review 3 column selection layout on mobile

Screenshots

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Frequency selector component is matching the Figma design for both mobile and large screen viewports.
  • This includes the "Current selection" pill for both desktop and mobile viewports, see: Improve already subscribed state in frequency selector component #11856 (comment)

Implementation Brief

• Update assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss to match the layout for mobile - each frequency item taking the full width and falling in vertical columns

Test Coverage

• Update any failing VRT

QA Brief

• Known Issue: Currently, if a frequency is already saved, then it takes a couple of seconds for the saved settings to load which causes movement and changes - have already created an issue here for it.
• Test the side panel in both desktop and mobile viewports.
• Open the side panel without any frequency being saved.
• Save a frequency and test both layouts. Test the case when the selected frequency is equal to the save frequency and then try selecting and saving another frequency. The colours and fonts should all match the Figma designs linked in the AC for mobile and large screen viewports.

Changelog entry

• Fix FrequencySelector component on small screens and add "Current subscription" badge