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
- Ensure you're using a recent
master
version of GitLab (this is reproducible on537dd7792efc5608b3e7c7ed6c5ea0b6811428b2
) - Emulate a mobile viewport using the browser's devtools; the iPhone X preset will do (375x812)
- Navigate to a path using the pagination component which has many pages, e.g.,
/groups/secure-team-test/-/security/dashboard/?page=4&days=90
- Scroll to the pagination component, and move to a page somewhere in the middle of the range of pages
- Observe wonky rendering/overflow
What is the current bug behavior?
This wonky rendering/overflow:
What is the expected correct behavior?
Something which looks more like this:
Relevant logs and/or screenshots
(See above)
Edited by Mark Florian