Skip to content

Pagination links component renders oddly on mobile

Summary

The pagination-links component can render oddly on mobile with a large number of pages (e.g., 12), and when the current page is near the middle (e.g., page 7).

This seems to be a new problem in 12.1.

This problem is probably worse in other languages; how that should be handled might require UX changes.

Steps to reproduce

  1. Ensure you're using a recent master version of GitLab (this is reproducible on 537dd7792efc5608b3e7c7ed6c5ea0b6811428b2)
  2. Emulate a mobile viewport using the browser's devtools; the iPhone X preset will do (375x812)
  3. Navigate to a path using the pagination component which has many pages, e.g., /groups/secure-team-test/-/security/dashboard/?page=4&days=90
  4. Scroll to the pagination component, and move to a page somewhere in the middle of the range of pages
  5. Observe wonky rendering/overflow

What is the current bug behavior?

This wonky rendering/overflow:

pagination_on_mobile

What is the expected correct behavior?

Something which looks more like this:

correct_pagination_on_mobile

Relevant logs and/or screenshots

(See above)

/cc @pgascouvaillancourt

Edited by Mark Florian