Merge pull request #192 from status-im/fix/mobile-css-issues

Fix a couple of CSS issues on mobile

src/js/components/ErrorInformation/404.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {withRouter, Link} from "react-router-dom";
 import {withNamespaces} from "react-i18next";
-import {Button} from 'reactstrap';
+import {Button, Row, Col} from 'reactstrap';
 
 import errorImage from '../../../images/error.png';
 import './index.scss';
@@ -16,10 +16,14 @@ const fourOFour = ({t, history}) => (
     <p className="text-muted">
       {t('errorInformation.404.tip')}
     </p>
-    <p>
+    <Row>
+      <Col xs={6}>
         <Button color="primary" onClick={history.goBack} className="mr-4">{t('errorInformation.404.back')}</Button>
+      </Col>
+      <Col xs={6}>
         <Button color="primary" tag={Link} to="/">{t('errorInformation.404.home')}</Button>
-    </p>
+      </Col>
+    </Row>
   </div>
 );
 

src/js/pages/Home/index.scss

@@ -3,15 +3,15 @@
 .home {
   .home-logo {
     text-align: center;
-    padding-top: 40px;
+    padding-top: 20px;
   }
 
   .home-headline {
-    margin-top: 2.5rem;
+    margin-top: 1.5rem;
   }
 
   .home--footer {
-    margin-top: 2.5rem;
+    margin-top: 1.5rem;
   }
 
   .teller-version {

src/js/pages/MyProfile/components/StatusContactCode.jsx

@@ -6,6 +6,7 @@ import {withNamespaces} from 'react-i18next';
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faQrcode} from "@fortawesome/free-solid-svg-icons";
 import QRCode from "qrcode.react";
+import Address from "../../../components/UserInformation/Address";
 
 class StatusContactCode extends Component {
 
@@ -41,7 +42,9 @@ class StatusContactCode extends Component {
           <ModalHeader toggle={this.toggleQRCode}>{t('statusContactCode.title')}</ModalHeader>
           <ModalBody className="text-center">
             <QRCode value={value}/>
-            {value}
+            <p className="overflow-hidden">
+              <Address address={value}/>
+            </p>
           </ModalBody>
         </Modal>
 

src/js/pages/MyProfile/components/__snapshots__/StatusContactCode.test.jsx.snap

@@ -116,7 +116,14 @@ exports[`StatusContactCode should render correctly 1`] = `
         size={128}
         value="0xkajshdhkjashd"
       />
-      0xkajshdhkjashd
+      <p
+        className="overflow-hidden"
+      >
+        <Address
+          address="0xkajshdhkjashd"
+          compact={false}
+        />
+      </p>
     </ModalBody>
   </Modal>
 </FormGroup>

src/js/wizards/hoc/withFooter.scss

@@ -4,7 +4,7 @@ $footer-height: 58px;
 
 .container {
   position: relative;
-  padding-bottom: $footer-height;
+  padding-bottom: $footer-height + 10px !important;
   min-height: 100%;
 
   .wizard-container {