fix: manuscripts table displaying

app/components/component-frontpage/src/Frontpage.js

@@ -17,6 +17,7 @@ import {
   HeadingWithAction,
   Pagination,
 } from '../../shared'
+import { PaginationContainer } from '../../../components/shared/Pagination'
 
 const Frontpage = ({ history, ...props }) => {
   const [sortName] = useState('created')
@@ -66,6 +67,7 @@ const Frontpage = ({ history, ...props }) => {
         page={page}
         setPage={setPage}
         totalCount={totalCount}
+        PaginationContainer={PaginationContainer}
       />
 
       {frontpage.length > 0 ? (

app/components/component-manuscripts/src/Manuscripts.jsx

@@ -6,9 +6,9 @@ import config from 'config'
 import Manuscript from './Manuscript'
 import {
   Container,
-  Table,
+  ManuscriptsTable,
   Header,
-  Content,
+  ScrollableContent,
   Heading,
   Carets,
   CaretUp,
@@ -19,6 +19,7 @@ import {
 import { HeadingWithAction } from '../../shared'
 import { GET_MANUSCRIPTS } from '../../../queries'
 import getQueryStringByName from '../../../shared/getQueryStringByName'
+import { PaginationContainerShadowed } from '../../../components/shared/Pagination'
 
 const urlFrag = config.journal.metadata.toplevel_urlfragment
 
@@ -107,8 +108,8 @@ const Manuscripts = ({ history, ...props }) => {
         <Heading>Manuscripts</Heading>
       )}
 
-      <Content>
-        <Table>
+      <ScrollableContent>
+        <ManuscriptsTable>
           <Header>
             <tr>
               {process.env.INSTANCE_NAME === 'aperture' && (
@@ -155,14 +156,15 @@ const Manuscripts = ({ history, ...props }) => {
               )
             })}
           </tbody>
-        </Table>
-        <Pagination
-          limit={limit}
-          page={page}
-          setPage={setPage}
-          totalCount={totalCount}
-        />
-      </Content>
+        </ManuscriptsTable>
+      </ScrollableContent>
+      <Pagination
+        limit={limit}
+        page={page}
+        setPage={setPage}
+        totalCount={totalCount}
+        PaginationContainer={PaginationContainerShadowed}
+      />
     </Container>
   )
 }

app/components/component-manuscripts/src/style.js

@@ -23,6 +23,8 @@ export {
   ErrorStatus,
   NormalStatus,
   StatusBadge,
+  ScrollableContent,
+  ManuscriptsTable,
 } from '../../shared'
 
 // TODO: Extract common above

app/components/component-users-manager/src/UsersManager.jsx

@@ -16,6 +16,7 @@ import {
   CaretDown,
   Carets,
 } from './style'
+import { PaginationContainer } from '../../../components/shared/Pagination'
 
 const GET_USERS = gql`
   query Users(
@@ -124,6 +125,7 @@ const UsersManager = () => {
           page={page}
           setPage={setPage}
           totalCount={totalCount}
+          PaginationContainer={PaginationContainer}
         />
       </Content>
     </Container>

app/components/shared/General.js

@@ -15,6 +15,13 @@ export const Content = styled.div`
   border-radius: ${th('borderRadius')};
 `
 
+export const ScrollableContent = styled(Content)`
+  @media (max-width: 1400px) {
+    margin-top: ${grid(2)};
+    overflow-x: scroll;
+  }
+`
+
 export const SectionContent = styled(Section)`
   padding: 0;
   box-shadow: ${th('boxShadow')};

app/components/shared/Pagination.jsx

@@ -47,13 +47,19 @@ const Page = styled.div`
     `}
 `
 
-const PaginationContainer = styled.div`
+export const PaginationContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: ${grid(2)} ${grid(3)};
 `
 
+export const PaginationContainerShadowed = styled(PaginationContainer)`
+  background-color: ${th('colorBackground')};
+  border-radius: ${th('borderRadius')};
+  box-shadow: ${th('boxShadow')};
+`
+
 const PaginationInfo = styled.div`
   strong {
     font-weight: 500;
@@ -89,7 +95,13 @@ const NextButton = styled(PreviousButton)`
   border-radius: 0 ${th('borderRadius')} ${th('borderRadius')} 0;
 `
 
-export const Pagination = ({ setPage, limit, page, totalCount }) => {
+export const Pagination = ({ 
+  setPage,
+  limit,
+  page,
+  totalCount,
+  PaginationContainer,
+}) => {
   const Previous = () => (
     <PreviousButton>
       <Action disabled={page <= 1} onClick={() => setPage(page - 1)}>

app/components/shared/Table.jsx

@@ -13,6 +13,12 @@ export const Table = styled.table`
   }
 `
 
+export const ManuscriptsTable = styled(Table)`
+  @media (max-width: 1400px) {
+    margin-top: 0;
+  }
+`
+
 export const Header = styled.thead`
   text-align: left;
   font-variant: all-small-caps;