[Pagination] Mobile?

[borm]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

1. go to https://material-ui.com/components/pagination/ on mobile browser or toggle Google Chrome to mobile view, iPhone 5 to X

Your Environment 🌎

Tech	Version
Material-UI	v4.10.1

[oliviertassinari]

@borm What change do you have in mind, how would it work? I have been wondering about this problem since we introduced the component, I'm not sure we have many great options. Things I have seen in the wild:

1. Shrink it to a version that is not really usable https://elastic.github.io/eui/#/navigation/pagination? Not sure.
2. Scrollable container keep on a single line? Not sure.
3. Add a uniform margin? Why not? It's an easy win.

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
index 171041c299..ad4988dc6b 100644
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -20,7 +20,7 @@ export const styles = (theme) => ({
     minWidth: 32,
     height: 32,
     padding: '0 6px',
-    margin: '0 3px',
+    margin: 3,
     color: theme.palette.text.primary,
   },
   /* Styles applied to the root element if `type="page"`. */

IMHO 3. would be good enough cc @mbrookes

[borm]

@oliviertassinari, In my mind i have only one change,
calculate how many items can be placed in container and place it

1. not worked for me in emulation mode, Google Chrome
2. bad solution
3. very simple and not fully true

[oliviertassinari]

calculate how many items can be placed in container and place it

We would need or make sure it doesn't introduce a layout shift during the initial server-side render and that it would still allow SEO crawlers to do their job.

Note that on mobile, infinite scrolling or simple next and previous buttons are often preferable to the usage of the Pagination component.

I agree that it could be interesting to display fewer items on mobile, for the previous generation of phones that are smaller in width.

Have you considered pagination like https://www.shutterstock.com/search/tree?page=2?

[borm]

hm, totally agreed with u about ssr
but i think we can do something like display: none for some items on client side, so markup will be same

[mbrookes]

i think we can do something like display: none for some items on client side,

The pagination displays the number of items needed to display a stable pagination. Which ones do you propose to hide?

[borm]

its a good question, and in the end it can have hard logic, mb something like google?

[borm]

also i think a good idea

https://www.pinterest.com/pin/106538347421972868/

[mbrookes]

mb something like google?

So basically what @oliviertassinari proposed a couple of comment back? (ShutterStock)

[borm]

So basically what @oliviertassinari proposed a couple of comment back? (ShutterStock)

yep, ShutterStock suggest same pagination for desktop and mobile

but i like more my second example from pinterest