Mobile: Height of ideas list makes for poor UX changing tabs or pagination

Bug Description

The height of the list makes it so users will need to scroll down to use the pagination and scroll up again to switch tabs which makes for a rough experience.

Darren: Yes, just noticed this too. When you paginate, you are not sent to the top of the widget.

Asana link: https://app.asana.com/0/1200491083500938/1200759450014575

Screenshots

---

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

Acceptance criteria

• When navigating between pages in the Idea Hub widget, the viewport should scroll to the top of the current tab if it is smaller than the entire list (e.g. can happen on mobile devices).
  • The height itself should not be updated here, that is part of #3843.

Implementation Brief

• When the page for Idea Hub pagination changes, scroll to the top of the Idea Hub widget if the Idea Hub widget header is not on-screen.
• This behaviour should be placed in a useUpdateEffect hook that relies on the pagination value changing, so it doesn’t trigger on first mount. It can be placed in the assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js file as it already has a reference to the ideaHubContainer ref.
• See #3898 for a proof-of-concept PR.

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• On a small screen and/or mobile device, visit the Idea Hub widget on either the Site Kit dashboard or in Storybook—the behaviour should be the same in either place.
• Visit the second page of pagination results.
• Scroll such that the header of the Idea Hub widget is not on screen.
• Click a pagination link to go to the previous, taller page.
• The widget should be scrolled into view.

Following the steps above, if the widget was already entirely in view (eg on a large screen, tablet, etc.) the viewport should NOT be scrolled.

Changelog entry

• Update Idea Hub widget pagination to scroll to widget top on page change if out of view.

[felixarntz]

@aaemnnosttv That’s a good point, but it would require a more significant UX effort to alter the UI, so let’s open a separate issue for it. I think focusing this one on the easier (temporary) fix of scrolling up makes sense, as the larger UI change would likely take longer than until launch.

[wpdarren]

QA Update ✅

Verified:

• Tested this on Browserstack via our supported browsers + on Android and iOS devices with different screen sizes.

Can confirm that when you use the pagination buttons to go to the next and previous pages, the widget is scrolled into view.

https://user-images.githubusercontent.com/73545194/133107188-260e9727-6dad-41b5-94ff-c10cb19e44a1.mp4

Can confirm that the mobile behaviour does not occur when using desktop.