conflict in css

embark-ui/src/components/Explorer.css

@@ -2,6 +2,10 @@
   border-top-width: 0 !important; /*Bootstrap uses important, so we need to override it*/ 
 }
 
+.explorer-overview .card-body {
+  overflow: hidden;
+}
+
 .explorer-row + .explorer-row {
   margin-top: 5px;
   padding-top: 20px;

embark-ui/src/components/ExplorerDashboardLayout.js

@@ -11,21 +11,21 @@ import TransactionsContainer from '../containers/TransactionsContainer';
 import './Explorer.css';
 
 const ExplorerDashboardLayout = () => (
-  <React.Fragment>
+  <div className="explorer-overview">
     <Row className="mt-4">
       <Col>
         <AccountsContainer />
       </Col>
     </Row>
     <Row>
-      <Col md={6}>
+      <Col xl={6}>
         <BlocksContainer />
       </Col>
-      <Col md={6}>
+      <Col xl={6}>
         <TransactionsContainer />
       </Col>
     </Row>
-  </React.Fragment>
+  </div>
 );
 
 export default ExplorerDashboardLayout;

embark-ui/src/components/Pagination.js

@@ -2,14 +2,14 @@ import React from 'react';
 import {Pagination, PaginationItem, PaginationLink} from 'reactstrap';
 import PropTypes from 'prop-types';
 
-const NB_PAGES_MAX = 14;
+const NB_PAGES_MAX = 8;
 
 const Pages = ({currentPage, numberOfPages, changePage}) => {
   let i = currentPage - NB_PAGES_MAX / 2;
   if (i < 1) {
     i = 1;
   }
-  let max = i + NB_PAGES_MAX;
+  let max = i + NB_PAGES_MAX - 1;
   if (max > numberOfPages) {
     max = numberOfPages;
   }
@@ -19,7 +19,7 @@ const Pages = ({currentPage, numberOfPages, changePage}) => {
   }
 
   return (
-    <Pagination aria-label="Page navigation example">
+    <Pagination aria-label="Page navigation example" className="mt-4 mb-0 float-right">
       <PaginationItem disabled={currentPage <= 1}>
         <PaginationLink previous href="#" onClick={(e) => {
           e.preventDefault();