Add little style fixes and comments

src/components/dashboard/styles.css

@@ -24,6 +24,7 @@
 
 .latestActivity {
   height: 30%;
+  margin: 0px;
 
   & h2 {
     margin: 40px 32px 20px;

src/components/multiStep/index.js

@@ -87,15 +87,15 @@ class MultiStep extends React.Component {
       extraProps.prevState = Object.assign({}, step.data[step.current + 1]);
     }
 
-    return (<section className={className}>
+    return (<div className={className}>
       <MultiStepNav steps={children} showNav={this.props.showNav}
         prevPage={prevPage}
         browsable={browsable} backButtonLabel={backButtonLabel}
         current={step.current} prevStep={step.prevStep} />
       {
         React.cloneElement(children[step.current], extraProps)
       }
-    </section>);
+    </div>);
   }
 }
 

src/components/transactionDashboard/index.js

@@ -19,7 +19,7 @@ const TransactionsDashboard = () => (
         </MultiStep>
       </Box>
     </div>
-    <div className={`${grid['col-xs-12']} ${grid['col-sm-8']}`}>
+    <div className={`${grid['col-xs-12']} ${styles.transactions} ${grid['col-sm-8']}`}>
       <Transactions></Transactions>
     </div>
   </div>

src/components/transactionDashboard/styles.css

@@ -8,6 +8,16 @@
   position: relative;
 }
 
+@media (--medium-viewport) {
+  .wrapper {
+    margin: 0px;
+  }
+
+  .transactions {
+    padding: 0px;
+  }
+}
+
 @media (--xSmall-viewport) {
   .send {
     display: none;

src/components/transactions/transactionList.js

@@ -27,6 +27,9 @@ class TransactionsList extends React.Component {
           />
         ))}
         {
+          // the transaction list should be scrollable on a large screen
+          // otherwise (XS) the whole transaction box will be scrollable
+          // (see transactionOverview.js)
           this.isLargeScreen()
             ? <Waypoint bottomOffset='-80%'
               key={this.props.transactions.length}

src/components/transactions/transactionOverview.js

@@ -62,6 +62,9 @@ class Transactions extends React.Component {
           nextStep={this.props.nextStep}
           t={this.props.t} />
         {
+          // the whole transactions box should be scrollable on XS
+          // otherwise only the transaction list should be scrollable
+          // (see transactionList.js)
           this.isSmallScreen()
             ? <Waypoint bottomOffset='-80%' key={this.props.transactions.length}
               onEnter={() => { this.loadMore(); }}></Waypoint>

src/components/transactions/transactionRow.js

@@ -18,21 +18,21 @@ class TransactionRow extends React.Component {
     const { props } = this;
     return (
       <div className={`${grid.row} ${styles.rows} transactionsRow`}>
-        <div className={`${styles.leftText} ${grid['col-xs-6']} ${grid['col-sm-6']} transactions-row`}>
+        <div className={`${styles.leftText} ${grid['col-xs-6']} ${grid['col-sm-6']} transactions-cell`}>
           <div className={`${styles.mainRow} ${styles.address}`}>
             <TransactionType {...props.value} address={props.address}></TransactionType>
           </div>
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-0']} ${grid['col-sm-2']} transactions-row`}>
+        <div className={`${styles.rightText} ${grid['col-xs-0']} ${grid['col-sm-2']} transactions-cell`}>
           <div className={`${styles.mainRow} ${styles.hiddenXs}`}>
             {props.value.confirmations ? <DateFromTimestamp time={props.value.timestamp} />
               : <Spinner />}
           </div>
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-5']} ${grid['col-sm-3']} transactions-row`}>
+        <div className={`${styles.rightText} ${grid['col-xs-5']} ${grid['col-sm-3']} transactions-cell`}>
           <div className={styles.mainRow}><Amount {...props}></Amount></div>
         </div>
-        <div className={`${styles.rightText} ${grid['col-xs-1']} ${grid['col-sm-1']} transactions-row`}>
+        <div className={`${styles.rightText} ${grid['col-xs-1']} ${grid['col-sm-1']} transactions-cell`}>
           { props.nextStep ?
             <div className={`${styles.mainRow} ${styles.clickable}`} onClick={props.nextStep.bind(this, { ...props })}>
               <FontIcon value='arrow-right'/>

src/components/transactions/transactionRow.test.js

@@ -56,7 +56,7 @@ describe('TransactionRow', () => {
       </Router>
     </Provider>, options);
 
-    expect(wrapper.find('.transactions-row')).to.have.lengthOf(4);
+    expect(wrapper.find('.transactions-cell')).to.have.lengthOf(4);
   });
 
   it('should render Spinner if no value.confirmations" ', () => {

src/components/transactions/transactions.css

@@ -190,6 +190,7 @@
 
 .results {
   overflow-y: initial;
+  margin: 0px;
 
   & .header {
     color: var(--grid-header-color);