Repository: jbetancur/react-data-table-component (ts)

Issue:
The page dropdown Icon overlaps with the select input.
## Issue Check list
- [x] Agree to the [Code of Conduct](https://github.com/jbetancur/react-data-table-component/blob/master/CODE-OF-CONDUCT.md)
- [x] Read the README
- [x] You are using React 16.8.0+
- [x] You installed `styled-components`
- [ ] Include relevant code or preferably a [code sandbox](https://codesandbox.io/embed/react-data-table-sandbox-ccyuu
)

## Describe the bug
The page dropdown Icon overlaps with the select input.



## To Reproduce
Steps to reproduce the behavior:
1. pass  paginationRowsPerPageOptions={[8, 12, 16, 24, 50, 100]} ,
2. and select 100
3. See how select icon overlaps with the value. 

## Expected behavior
 The page dropdown Icon doesn't overlap with the select input.

[screenshot](https://ibb.co/Rcw14hz)



Pull request:
fixes select dropdown overlap
fixes #785 

Patch:
diff --git a/src/DataTable/Select.tsx b/src/DataTable/Select.tsx
index 427725b..72de621 100644
--- a/src/DataTable/Select.tsx
+++ b/src/DataTable/Select.tsx
@@ -5,10 +5,10 @@ import DropDownIcon from '../icons/Dropdown';
 const SelectControl = styled.select`
 	cursor: pointer;
 	height: 24px;
-	min-width: 24px;
+	max-width: 100%;
 	user-select: none;
 	padding-left: 8px;
-	padding-right: 12px;
+	padding-right: 24px;
 	box-sizing: content-box;
 	font-size: inherit;
 	color: inherit;
@@ -16,6 +16,7 @@ const SelectControl = styled.select`
 	background-color: transparent;
 	appearance: none;
 	direction: ltr;
+	flex-shrink: 0;
 
 	&::-ms-expand {
 		display: none;


Test patch:
diff --git a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
index 4782aa4..fb49cd7 100644
--- a/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -1715,13 +1715,13 @@ exports[`DataTable::Pagination should change the page position when using pagina
 .c17 {
   cursor: pointer;
   height: 24px;
-  min-width: 24px;
+  max-width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   padding-left: 8px;
-  padding-right: 12px;
+  padding-right: 24px;
   box-sizing: content-box;
   font-size: inherit;
   color: inherit;
@@ -1731,6 +1731,9 @@ exports[`DataTable::Pagination should change the page position when using pagina
   -moz-appearance: none;
   appearance: none;
   direction: ltr;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c17::-ms-expand {
diff --git a/src/DataTable/__tests__/__snapshots__/Pagination.test.tsx.snap b/src/DataTable/__tests__/__snapshots__/Pagination.test.tsx.snap
index 0488df3..14eaf26 100644
--- a/src/DataTable/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/src/DataTable/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`should render correctly with default props 1`] = `
 .c4 {
   cursor: pointer;
   height: 24px;
-  min-width: 24px;
+  max-width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   padding-left: 8px;
-  padding-right: 12px;
+  padding-right: 24px;
   box-sizing: content-box;
   font-size: inherit;
   color: inherit;
@@ -20,6 +20,9 @@ exports[`should render correctly with default props 1`] = `
   -moz-appearance: none;
   appearance: none;
   direction: ltr;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c4::-ms-expand {