p-pagination overflowing on mobile

[lyubomir-popov]

Describe the bug

p-pagination overflows on small screens:

To Reproduce

Steps to reproduce the behavior:

1. Go to https://vanillaframework.io/docs/examples/patterns/pagination/pagination
2. Resize the window to 320px, observe:

Expected behavior

No overflow - I suggest dropping the borders, so buttons can be set next to each other with no margin.

[danielmutis]

Still needs a few more states and responsive behaviours.

[danielmutis]

@juanruitina to provide examples from benchmark

[anthonydillon]

Dropping the borders makes the interaction less obvious. I like the high contrast of the actionable area. This also seems orthogonal to the solution of the width on small screens as at some point the width will exceed the width of the screen.

[juanruitina]

Alexandra and I did extensive benchmarking on this. Dell is an interesting example: pagination adapts at six (!) different breakpoints. They rely on an input field to pick a page number, which can result in a very compact component. However, they don't seem to do this to improve responsiveness, but probably for functional reasons (such as giving users more control over which page to jump to).

In oposition to this, design systems for more content-heavy products have a approach more similar to ours, with a short list of buttons/links for specific pages (Gov.uk, BBC). Gov.uk's is an interesting one: no borders, but numbers with link-like underlining, arrows, and background only for states (active, hover and focus). Lyubo's suggestion seems to be compact enough even at the narrower of screens (a very small subset of our users, some 0.15%, have screens 320px wide or narrower). If page numbers have more than one digit it might result on wrapping, but that would affect an even smaller number of users.

I personally think borders are not essential for pagination to be recognisable as such: we can achieve that with "just" the elements (page numbers, chevrons/arrows), the active state (and interaction states), and the component's positioning. But it would be great to A/B test, perhaps on https://ubuntu.com/blog, to check if this affects perceived prominence substantially.

[bartaz]

@juanruitina @lyubomir-popov Is there any decision on how we want to proceed with this?

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15233.

This message was autogenerated