Tiles layout on mobile and tablet is broken

[kelvinballoo]

Bug Description

The layout on mobile and tablet is broken. 2 things to highlight here:

• The 'Top content by pageviews' section goes beyond the screen viewport. I suspect it's due to the long title names which are not truncated on those breakpoints.
• The tile is a single tile but you will see that there is a mark under 'All visitors' denoting as if there are other tabs but this is false. If it's a single tab, there should be no mark underneath.

Steps to reproduce

1. Set up audience tile under the audience segmentation flag for 3 tiles
2. View it on mobile and tablet.

Screenshots

---

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

Acceptance criteria

• Audience segmentation is displayed correctly on all devices.

Implementation Brief

• [ ] Layout is expanded by the page links, which can have very long text, and stretch the flex container nested within a grid. To contain the long page text, in https://github.com/google/site-kit-wp/blob/3cce2fa8ddf862ae58adf177380f66258316d0dc/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-tiles.scss#L94
  • Add overflow: hidden, this will contain the flex wrapper and long text within so it does not overflow across different screens.

Test Coverage

• No updates needed

QA Brief

• Enable the audienceSegmentation feature flag and set up Analytics + Audience Segmentation
• Set up Site Kit using oi.ie
• View the audience tile on the Site Kit dashboard
• No scrolling/widget being too wide should occur

Changelog entry

• Fix the broken layout issue in the audience segmentation widget on mobile and tablet devices.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA update ✅

• Tested on main environment.
• Tested layout on mobile and tablet when only 1 audience widget is selected.
• Tested layout on mobile and tablet when 2 audience widget are selected.
• Tested layout on mobile and tablet when 3 audience widget are selected.
• Verified issue is resolved and widgets appears correctly in all devices.

    _Two Audience Widget_    _Three Audience _Widget__    _Video -_ https://github.com/user-attachments/assets/f76b560f-20bd-4bbd-9eb2-c908574ec047