Merge pull request #521 from KPMP/KPMP-5224_fix_dashboard_alignment

KPMP-5224: adjusted homepage containers to align their edges
KPMP · Apr 25, 2024 · 2748366 · 2748366
2 parents 85935ca + 273cabe
commit 2748366
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -13,6 +13,8 @@ class Home extends Component {
           <Col md='12' lg='12'>
             <TopContent/>
           </Col>
+        </Row>
+        <Row>
           <Col md='12' lg='4'>
             <LeftContent />
           </Col>

diff --git a/src/components/Home/LeftContent.js b/src/components/Home/LeftContent.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Container, Row, Button } from 'reactstrap';
+import { Container, Button } from 'reactstrap';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 
 class LeftContent extends Component {
@@ -13,7 +13,7 @@ class LeftContent extends Component {
   }
   render() {
     return (
-      <Row>
+      <div style={{marginRight: '15px'}}>
         <Container className="mt-3 rounded border p-3 shadow-sm">
           <h5>Explorer</h5>
           <div>
@@ -60,7 +60,7 @@ class LeftContent extends Component {
             <Button className="w-100" color='primary' href='https://www.kpmp.org/collaboration' size='lg' block onClick={() => { this.handleGoogleAnalyticsEvent('Atlas Home', 'Navigation', 'collaborate') }}>Collaborate with us</Button>
           </div>
         </Container>
-      </Row>
+      </div>
     );
   }
 }

diff --git a/src/index.scss b/src/index.scss
@@ -457,9 +457,8 @@ tr.MuiTableRow-root:nth-child(even) {
 
 #homepage {
   @media (min-width: 990px) {
-    .container-expanded {
-      max-width: 98.75%;
-      margin-left: 15px;
+    .container {
+      max-width: 100%;
     }
   }
   @media (max-width: 635px) {