fix(Pagination): Change pagination to not break on small devices

catho · Apr 4, 2019 · 711cd25 · 711cd25
1 parent f24d255
commit 711cd25
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 3 deletions.
diff --git a/components/Pagination/Pagination.jsx b/components/Pagination/Pagination.jsx
@@ -11,7 +11,6 @@ import pagination from './utils/pagination';
 const Wrapper = styled.nav`
   align-items: center;
   display: flex;
-  justify-content: center;
   padding: 16px !important;
 `;
 

diff --git a/components/Pagination/sub-components/ActionButton.jsx b/components/Pagination/sub-components/ActionButton.jsx
@@ -15,6 +15,7 @@ const StyledButton = styled(Button)`
   padding-left: 8px;
   padding-right: 8px;
   text-decoration: none;
+  white-space: nowrap;
 
   ${({ disabled }) =>
     disabled

diff --git a/components/Pagination/sub-components/Dots.jsx b/components/Pagination/sub-components/Dots.jsx
@@ -20,7 +20,7 @@ const sharedPseudoElementStyles = `
 const Wrapper = styled.div`
   display: inline-block;
   margin: 0 4px;
-  width: 22px;
+  min-width: 22px;
 `;
 
 const Dot = styled.span`

diff --git a/components/Pagination/sub-components/Page.jsx b/components/Pagination/sub-components/Page.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Colors from '../../Colors';
 
-const PageButton = styled.button`
+const PageButton = styled.a`
   align-items: center;
   background-color: ${({ active }) =>
     active ? Colors.BLUE['500'] : Colors.WHITE};
@@ -21,6 +21,7 @@ const PageButton = styled.button`
   min-width: 40px;
   outline: none;
   padding: 5px 8px;
+  text-decoration: none;
   transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
     color 0.2s ease-in-out, font-weight 0.2s ease-in-out;