mobile tweaks

client/src/components/molecules/Pagination.module.scss

@@ -22,10 +22,11 @@
     font-weight: $font-weight-bold;
     padding: $spacer / 4 $spacer / 2;
     margin-left: -1px;
+    margin-top: -1px;
     display: inline-block;
     cursor: pointer;
     border: 1px solid $brand-grey-lighter;
-    min-width: 3rem;
+    min-width: 3.5rem;
 
     &,
     &:hover,

client/src/components/molecules/Pagination.tsx

@@ -2,13 +2,47 @@ import React, { PureComponent } from 'react'
 import ReactPaginate from 'react-paginate'
 import styles from './Pagination.module.scss'
 
-export default class Pagination extends PureComponent<{
+interface PaginationProps {
     totalPages: number
     currentPage: number
     handlePageClick(data: { selected: number }): Promise<any>
-}> {
+}
+
+interface PaginationState {
+    smallViewport: boolean
+}
+
+export default class Pagination extends PureComponent<
+    PaginationProps,
+    PaginationState
+> {
+    public state = { smallViewport: true }
+    private mq = matchMedia && window.matchMedia('(min-width: 600px)')
+
+    public componentDidMount() {
+        if (matchMedia) {
+            this.mq.addListener(this.viewportChange)
+            this.viewportChange(this.mq)
+        }
+    }
+
+    public componentWillUnmount() {
+        if (matchMedia) {
+            this.mq.removeListener(this.viewportChange)
+        }
+    }
+
+    private viewportChange = (mq: { matches: boolean }) => {
+        if (mq.matches) {
+            this.setState({ smallViewport: false })
+        } else {
+            this.setState({ smallViewport: true })
+        }
+    }
+
     public render() {
         const { totalPages, currentPage, handlePageClick } = this.props
+        const { smallViewport } = this.state
 
         return (
             totalPages > 1 && (
@@ -16,8 +50,9 @@ export default class Pagination extends PureComponent<{
                     pageCount={totalPages}
                     // react-pagination starts counting at 0, we start at 1
                     initialPage={currentPage - 1}
-                    marginPagesDisplayed={1}
-                    pageRangeDisplayed={6}
+                    // adapt based on media query match
+                    marginPagesDisplayed={smallViewport ? 0 : 1}
+                    pageRangeDisplayed={smallViewport ? 3 : 6}
                     onPageChange={data => handlePageClick(data)}
                     disableInitialCallback
                     previousLabel={'←'}