Material-ui: TablePagination Rows Per Page Select style

[antokara]

The right padding inside the Select of the Rows Per Page is too small and does not look right when the Rows Per Page is a two digit number but looks especially bad on three digit numbers or more. The number touches the dropdown list arrow of the select.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No matter how many Rows Per Page are selected, it should look nice, have a normal space between the number and the dropdown list arrow of the select.

Current Behavior 😯

The space between the Rows Per Page is not enough and then number touches the dropdown list arrow of the select.

Steps to Reproduce 🕹

Even the demo does not look right when the selected Items Per Page are 2 digits
https://material-ui.com/demos/tables/#sorting-amp-selecting

1. change the Items Per Page from 5 to 25

I wanted to provide a CodeSandbox example with three digit Items Per Page that illustrate the bigger issue but it looks like CodeSandbox is having issue lately, or at least, for me.

Context 🔦

Normal use of Tables with TablePagination

Your Environment 🌎

Latest version of Material
Chrome 72 on Mac and Linux

[oliviertassinari]

@antokara Yes, I agree. I think that we should increase the padding right. Do you want to take care of it?

[antokara]

@oliviertassinari sure, I'll open a PR

[antokara]

@oliviertassinari do I need permission to push my branch and then open the PR?

ERROR: Permission to mui-org/material-ui.git denied to antokara.

[leMaik]

@antokara You need to fork the project first and then create a branch on your fork, push that (to your fork) and then submit a PR. Here's a manual, if that'll help.

[antokara]

I opened a PR
https://github.com/mui-org/material-ui/pull/14547
but it fails on the visual diff. I have to spend some time and setup docker...

[leMaik]

@antokara The visual diff is pretty much expected, since you changed something visual (i.e. the padding).

[leMaik]

I think that the large space between the number and the arrow for single-digit numbers looks a bit strange. What do you think about right-aligning the text in the select field? :thinking:

[oliviertassinari]

@leMaik I like the idea