Bug Description

Analytics most popular pages widget is not properly appearing on viewport having width between 599px to 668px.

Steps to reproduce

1. Set up site kit with Analytics.
2. Go to main dashboard.
3. Set viewport between 599px to 668px using dev tool.
4. See issue.

Screenshots

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

Acceptance criteria

• For the Top content over 28 days table, on mobile viewports where the table headings start to overlap with each other, the table should be converted to a two column layout with tabs that as per this Figma mock.

Screenshot

Implementation Brief

Report Table Tabbed View

• Update assets/js/components/ReportTable.js
  • Add a new boolean prop tabbedLayout, if this prop is true, render the following alternate component structure:
    • Use the TabBar and Tab components to render a new tab bar above the report table, mapping over the columns props to get the tab titles and keys.
    • Store the currently selected tab in component state.
    • Update the table to render only the column selected in the active tab.
• Update assets/sass/components/global/_googlesitekit-table.scss, matching the Figma mock for this tabbed version of the report table.

Most Popular Pages module

• Update assets/js/modules/analytics-4/components/module/ModulePopularPagesWidgetGA4/index.js:
  • Use the useBreakpoint hook to get the current breakpoint.
  • Pass the true to the tabbedLayout prop of the ReportTable in this component if the breakpoint is BREAKPOINT_TABLET or BREAKPOINT_MOBILE.

Test Coverage

• In assets/js/components/ReportTable.stories.js, create a new VRT for the tabbed version of this component.
• Confirm there are no regressions to other key widgets that share this component.

QA Brief

Changelog entry