From 10330fec1788f8198679e71c2bec8f6ee664c9f5 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 13:48:56 +0200
Subject: [PATCH 1/8] Fix responsive margin of body wrapper

---
 src/components/app/app.css  |  2 +-
 src/components/app/index.js | 37 ++++++++++++++++++++-----------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/app/app.css b/src/components/app/app.css
index 5706a32a6..49b313da6 100644
--- a/src/components/app/app.css
+++ b/src/components/app/app.css
@@ -10,7 +10,7 @@ body{
 }
 .body-wrapper {
   flex: 1 1 80%;
-  max-width: 80%;
+  max-width: 100%;
   max-height: 100%;
   box-sizing: border-box;
   margin: 0 auto;
diff --git a/src/components/app/index.js b/src/components/app/index.js
index a750ab566..4c5469005 100644
--- a/src/components/app/index.js
+++ b/src/components/app/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import PrivateRoutes from '../privateRoute';
 import Account from '../account';
 import Header from '../header';
@@ -14,23 +15,25 @@ import Tabs from '../tabs';
 import LoadingBar from '../loadingBar';
 
 const App = () => (
-  <section className={styles['body-wrapper']}>
-    <Header />
-    <main>
-      <PrivateRoutes path='/main' render={ ({ match }) => (
-        <main>
-          <Account />
-          <Tabs />
-          <Route path={`${match.url}/transactions`} component={Transactions} />
-          <Route path={`${match.url}/voting`} component={Voting} />
-          <Route path={`${match.url}/forging`} component={Forging} />
-        </main>
-      )} />
-      <Route exact path="/" component={Login} />
-    </main>
-    <Dialog />
-    <Toaster />
-    <LoadingBar />
+  <section className={`${grid.row} ${styles['body-wrapper']}`}>
+    <div className={`${grid['col-xs-12']} ${grid['col-sm-12']} ${grid['col-md-10']} ${grid['col-md-offset-1']}`}>
+      <Header />
+      <main>
+        <PrivateRoutes path='/main' render={ ({ match }) => (
+          <main>
+            <Account />
+            <Tabs />
+            <Route path={`${match.url}/transactions`} component={Transactions} />
+            <Route path={`${match.url}/voting`} component={Voting} />
+            <Route path={`${match.url}/forging`} component={Forging} />
+          </main>
+        )} />
+        <Route exact path="/" component={Login} />
+      </main>
+      <Dialog />
+      <Toaster />
+      <LoadingBar />
+    </div>
   </section>
 );
 

From c6a6a3a46a3cebfdbeb8e9306e056c9183cd3d4f Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 13:50:06 +0200
Subject: [PATCH 2/8] FIx vertical scroll on all tables

---
 src/components/app/app.css                    |  4 +++
 src/components/forging/forging.css            |  1 +
 .../transactions/transactionsComponent.js     |  2 +-
 src/components/voting/voting.js               | 26 ++++++++++---------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/app/app.css b/src/components/app/app.css
index 49b313da6..1bf108394 100644
--- a/src/components/app/app.css
+++ b/src/components/app/app.css
@@ -40,3 +40,7 @@ body{
 :global .hasPaddingRow{
   padding: 0 16px;
 }
+
+:global .verticalScroll {
+  overflow-x: auto;
+}
diff --git a/src/components/forging/forging.css b/src/components/forging/forging.css
index e455602da..85a872491 100644
--- a/src/components/forging/forging.css
+++ b/src/components/forging/forging.css
@@ -11,6 +11,7 @@
 
 .forgedBlocksTableWrapper {
   margin: 0 -8px;
+  overflow-x: auto;
 }
 
 .circularProgressTitle {
diff --git a/src/components/transactions/transactionsComponent.js b/src/components/transactions/transactionsComponent.js
index e4c0df60d..87e0ea372 100644
--- a/src/components/transactions/transactionsComponent.js
+++ b/src/components/transactions/transactionsComponent.js
@@ -26,7 +26,7 @@ class Transactions extends React.Component {
 
   render() {
     return (
-      <div className='box noPaddingBox'>
+      <div className='box noPaddingBox verticalScroll'>
         {this.props.transactions.length > 0 ?
           <table className={tableStyle.table}>
           <TransactionsHeader tableStyle={tableStyle}></TransactionsHeader>
diff --git a/src/components/voting/voting.js b/src/components/voting/voting.js
index 7177dbddf..7ee49ac89 100644
--- a/src/components/voting/voting.js
+++ b/src/components/voting/voting.js
@@ -159,19 +159,21 @@ class Voting extends React.Component {
           votedDelegates={this.state.votedDelegates}
           search={ value => this.search(value) }
         />
-        <Table selectable={false}>
-          <TableHead displaySelect={false}>
-            <TableCell>Vote</TableCell>
-            <TableCell>Rank</TableCell>
-            <TableCell>Name</TableCell>
-            <TableCell>Lisk Address</TableCell>
-            <TableCell>Uptime</TableCell>
-            <TableCell>Approval</TableCell>
-          </TableHead>
-          {this.state.delegates.map((item, idx) => (
+        <div className='verticalScroll'>
+          <Table selectable={false}>
+            <TableHead displaySelect={false}>
+              <TableCell>Vote</TableCell>
+              <TableCell>Rank</TableCell>
+              <TableCell>Name</TableCell>
+              <TableCell>Lisk Address</TableCell>
+              <TableCell>Uptime</TableCell>
+              <TableCell>Approval</TableCell>
+            </TableHead>
+            {this.state.delegates.map((item, idx) => (
               <VotingRow key={idx} data={item} />
-          ))}
-        </Table>
+            ))}
+          </Table>
+        </div>
         {this.state.notFound}
         <Waypoint onEnter={this.loadMore.bind(this)}></Waypoint>
       </div>

From a65b875249418a1028bad65b99c2fb9ba91320ab Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 13:50:37 +0200
Subject: [PATCH 3/8] Fix forging center cards responsiveness

---
 src/components/forging/delegateStats.js | 2 +-
 src/components/forging/forgingStats.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/forging/delegateStats.js b/src/components/forging/delegateStats.js
index 19a5654e8..78a573a84 100644
--- a/src/components/forging/delegateStats.js
+++ b/src/components/forging/delegateStats.js
@@ -29,7 +29,7 @@ const progressCircleCardList = [
 const DelegateStats = props => (
   <div className={`${grid.row} ${grid['between-xs']}`}>
     {progressCircleCardList.map(cardItem => (
-      <div className={grid['col-xs-4']} key={cardItem.key}>
+      <div className={`${grid['col-xs-12']} ${grid['col-sm-4']}`} key={cardItem.key}>
         <Card className={style.grayCard}>
           <CardText>
           <div className={grid['col-xs-12']}>
diff --git a/src/components/forging/forgingStats.js b/src/components/forging/forgingStats.js
index 2e90dda21..b816a5c48 100644
--- a/src/components/forging/forgingStats.js
+++ b/src/components/forging/forgingStats.js
@@ -36,7 +36,7 @@ class ForgingStats extends React.Component {
     return (
       <div className={`${grid.row} ${grid['between-xs']}`}>
         {statCardObjects.map(cardObj => (
-          <div className={grid['col-xs-3']} key={cardObj.key}>
+          <div className={`${grid['col-xs-12']} ${grid['col-sm-3']}`} key={cardObj.key}>
             <Card className={style.grayCard}>
               <CardText>
               <div className={grid['col-xs-12']}>

From 367143d5c1e29736cc4d508d0a397ad88bb656da Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 14:40:37 +0200
Subject: [PATCH 4/8] Reflow account component vertically on small screen

---
 src/components/account/account.css |  7 ++++
 src/components/account/account.js  | 64 ++++++++++++++++++------------
 src/components/account/address.js  | 13 ++++--
 3 files changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/components/account/account.css b/src/components/account/account.css
index 83f0cb34e..05b332415 100644
--- a/src/components/account/account.css
+++ b/src/components/account/account.css
@@ -69,6 +69,13 @@
     font-weight: 500;
     letter-spacing: 0;
     margin-top: 0;
+    margin-top: 20px;
     margin-bottom: 16px;
     text-align: center;
 }
+
+@media only screen and (min-width: 48em) {
+  .title {
+    margin-top: 0;
+  }
+}
diff --git a/src/components/account/account.js b/src/components/account/account.js
index 18410b854..396deee29 100644
--- a/src/components/account/account.js
+++ b/src/components/account/account.js
@@ -20,40 +20,52 @@ const Account = ({
 
   return (
     <section className={`${grid.row} ${styles.wrapper}`}>
-      <article className={grid['col-xs-4']}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <Address {...account}></Address>
       </article>
-      <article className={grid['col-xs-4']}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']}`}>
         <div className="box">
-          <h3 className={styles.title}>Peer</h3>
-          <div className={styles['value-wrapper']}>
-            <span id="accountStatus" className="status">
-              {status}
-            </span>
-            <p className="inner primary peer-network">
-              {peers.data.options.name}
-            </p>
-            <p className="inner secondary peer">
-              {peers.data.currentPeer}
-              <span> : {peers.data.port}</span>
-            </p>
+          <div className={`${grid.row}`}>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+              <h3 className={styles.title}>Peer</h3>
+            </div>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+              <div className={styles['value-wrapper']}>
+                <span id="accountStatus" className="status">
+                  {status}
+                </span>
+                <p className="inner primary peer-network">
+                  {peers.data.options.name}
+                </p>
+                <p className="inner secondary peer">
+                  {peers.data.currentPeer}
+                  <span> : {peers.data.port}</span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </article>
-      <article className={`${grid['col-xs-4']} balance`}>
+      <article className={`${grid['col-sm-4']} ${grid['col-xs-12']} balance`}>
         <div className="box">
-          <h3 className={styles.title}>Balance</h3>
-          <ClickToSend
-            rawAmount={Math.max(0, account.balance - toRawLsk(0.1))} >
-            <div className={styles['value-wrapper']}>
-              <p className="inner primary full hasTip balance-value">
-                <LiskAmount val={account.balance} /> LSK
-              </p>
-              <p className="inner secondary tooltip">
-                Click to send all funds
-              </p>
+          <div className={`${grid.row}`}>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+              <h3 className={styles.title}>Balance</h3>
             </div>
-          </ClickToSend>
+            <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+              <ClickToSend
+                rawAmount={Math.max(0, account.balance - toRawLsk(0.1))} >
+                <div className={styles['value-wrapper']}>
+                  <p className="inner primary full hasTip balance-value">
+                    <LiskAmount val={account.balance} /> LSK
+                  </p>
+                  <p className="inner secondary tooltip">
+                    Click to send all funds
+                  </p>
+                </div>
+              </ClickToSend>
+            </div>
+          </div>
         </div>
       </article>
     </section>
diff --git a/src/components/account/address.js b/src/components/account/address.js
index c1a2ac5d1..679c92a57 100644
--- a/src/components/account/address.js
+++ b/src/components/account/address.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './account.css';
 
 const Address = (props) => {
@@ -18,9 +19,15 @@ const Address = (props) => {
 
   return (
     <div className={`box ${styles['text-center']}`}>
-      <h3 id="firstBox" className={styles.title}>{title}</h3>
-      <div className={styles['value-wrapper']}>
-        {content}
+      <div className={`${grid.row}`}>
+        <div className={`${grid['col-sm-12']} ${grid['col-xs-4']}`}>
+          <h3 id="firstBox" className={styles.title}>{title}</h3>
+        </div>
+        <div className={`${grid['col-sm-12']} ${grid['col-xs-8']}`}>
+          <div className={styles['value-wrapper']}>
+            {content}
+          </div>
+        </div>
       </div>
     </div>
   );

From c7d1b760ce224286b98365cf5d194d9aeba43337 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 14:56:37 +0200
Subject: [PATCH 5/8] Fix indentation

---
 src/components/account/account.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/account/account.js b/src/components/account/account.js
index 396deee29..928e2a52d 100644
--- a/src/components/account/account.js
+++ b/src/components/account/account.js
@@ -15,8 +15,8 @@ const Account = ({
   account, peers,
 }) => {
   const status = (peers.status && peers.status.online) ?
-      <i className="material-icons online">check</i>
-      : <i className="material-icons offline">error</i>;
+    <i className="material-icons online">check</i> :
+    <i className="material-icons offline">error</i>;
 
   return (
     <section className={`${grid.row} ${styles.wrapper}`}>

From a60620ead4f75a34bc029fe43e67161d4151cdd5 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Fri, 18 Aug 2017 15:03:53 +0200
Subject: [PATCH 6/8] Fix responsiveness of headerElement

---
 src/components/header/header.css       | 10 +++++++---
 src/components/header/headerElement.js |  9 ++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index 7be59dbe2..f2192de22 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -1,11 +1,15 @@
 .wrapper{
-    margin: 5px -8px 16px 0;
+    margin: 5px -8px 8px 0;
     padding: 8px;
 }
+.logoWrapper {
+    width: 50%;
+}
 .logo{
-    width: 25%;
+    width: 50%;
     min-width: 128px;
-    max-width: 256px;
+    max-width: 200px;
+    padding: 8px;
 }
 .button, .iconButton{
     padding: 8px;
diff --git a/src/components/header/headerElement.js b/src/components/header/headerElement.js
index 173b14cf6..31b184055 100644
--- a/src/components/header/headerElement.js
+++ b/src/components/header/headerElement.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from 'react-toolbox/lib/button';
 import { IconMenu, MenuItem } from 'react-toolbox/lib/menu';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import logo from '../../assets/images/LISK-nano.png';
 import styles from './header.css';
 import VerifyMessage from '../signVerify/verifyMessage';
@@ -11,8 +12,10 @@ import PrivateWrapper from '../privateWrapper';
 import SecondPassphraseMenu from '../secondPassphrase';
 
 const HeaderElement = props => (
-  <header className={styles.wrapper}>
-    <img className={styles.logo} src={logo} alt="logo" />
+  <header className={`${grid.row} ${grid['between-xs']} ${styles.wrapper}`} >
+    <div className={styles.logoWrapper}>
+      <img className={styles.logo} src={logo} alt="logo" />
+    </div>
     <PrivateWrapper>
       <IconMenu
         className={`${styles.iconButton} main-menu-icon-button`}
@@ -57,7 +60,7 @@ const HeaderElement = props => (
           title: 'Send',
           childComponent: Send,
         })}>Send</Button>
-      </PrivateWrapper>
+    </PrivateWrapper>
   </header>
 );
 

From 9724a5c992b52fdbae01dc036aa4c4c6e71f5c57 Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 21 Aug 2017 10:47:39 +0200
Subject: [PATCH 7/8] Fix header flow on smaller screen

---
 src/components/header/header.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index f2192de22..ffadf838a 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -3,11 +3,11 @@
     padding: 8px;
 }
 .logoWrapper {
-    width: 50%;
+    width: 25%;
 }
 .logo{
-    width: 50%;
-    min-width: 128px;
+    width: 100%;
+    min-width: 108px;
     max-width: 200px;
     padding: 8px;
 }

From 69d9ff71fd124270f1cafdd3a4b2c7a34e45debf Mon Sep 17 00:00:00 2001
From: Vit Stanislav <vit@lightcurve.io>
Date: Mon, 21 Aug 2017 10:48:03 +0200
Subject: [PATCH 8/8] Hide transaction ID on smaller screens

---
 src/components/transactions/transactionRow.js     | 2 +-
 src/components/transactions/transactions.css      | 6 ++++++
 src/components/transactions/transactionsHeader.js | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/transactions/transactionRow.js b/src/components/transactions/transactionRow.js
index fed527a63..12e0b4845 100644
--- a/src/components/transactions/transactionRow.js
+++ b/src/components/transactions/transactionRow.js
@@ -14,7 +14,7 @@ const TransactionRow = props => (
           <TooltipTime label={props.value.timestamp}></TooltipTime> :
           <Spinner />}
     </td>
-    <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
+    <td className={`${props.tableStyle.rowCell} ${styles.centerText} ${styles.hiddenXs}`}>
         <TooltipWrapper tooltip={`${props.value.confirmations} confirmations`}>{props.value.id}</TooltipWrapper>
     </td>
     <td className={`${props.tableStyle.rowCell} ${styles.centerText}`}>
diff --git a/src/components/transactions/transactions.css b/src/components/transactions/transactions.css
index 1bdf21308..581a3de36 100644
--- a/src/components/transactions/transactions.css
+++ b/src/components/transactions/transactions.css
@@ -35,3 +35,9 @@
 .centerText{
     text-align: center;
 }
+
+@media screen and (max-width: 48em) {
+  .hiddenXs {
+    display: none;
+  }
+}
diff --git a/src/components/transactions/transactionsHeader.js b/src/components/transactions/transactionsHeader.js
index ea89930ec..81fcdccbf 100644
--- a/src/components/transactions/transactionsHeader.js
+++ b/src/components/transactions/transactionsHeader.js
@@ -5,7 +5,7 @@ const TransactionsHeader = ({ tableStyle }) => (
   <thead>
     <tr>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Time</th>
-      <th className={`${tableStyle.headCell} ${styles.centerText}`}>Transaction ID</th>
+      <th className={`${tableStyle.headCell} ${styles.centerText} ${styles.hiddenXs}`}>Transaction ID</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>From / To</th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}></th>
       <th className={`${tableStyle.headCell} ${styles.centerText}`}>Amount</th>