Improve text positioning on mobile view

ui/app/components/tx-list.js

@@ -134,6 +134,7 @@ TxList.prototype.renderTransactionListItem = function () {
         })
       ]),
 
+      h('div.tx-list-account-and-status-wrapper', {}, [
         h('div.tx-list-account-wrapper', {
           style: {}
         }, [
@@ -149,6 +150,7 @@ TxList.prototype.renderTransactionListItem = function () {
             transactionStatus,
           ]),
         ]),
+      ]),
 
       h('div.flex-column.tx-list-details-wrapper', {
         style: {}

ui/app/css/itcss/components/hero-balance.scss

@@ -1,7 +1,3 @@
-$break-small: 575px;
-$break-medium: 780px;
-$break-large: 576px;
-
 .hero-balance {
 
   @media screen and (max-width: $break-small) {

ui/app/css/itcss/components/transaction-list.scss

@@ -18,14 +18,26 @@
   flex: 0 0 70px;
   align-items: stretch;
   justify-content: flex-start;
+  @media screen and (max-width: $break-small) {
+    margin: 0em 1.3em 0.95em 1.3em;
+  }
+
+  @media screen and (min-width: $break-large) {
     margin: 0em 1.3em 0em 1.3em;
+  }
 }
 
 .tx-list-date-wrapper {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
+  @media screen and (max-width: $break-small) {
+    margin-top: 6px;
+    margin-bottom: 20px;
+  }
+  @media screen and (min-width: $break-large) {
     margin-top: 6px;
+  }
 }
 
 .tx-list-content-wrapper {
@@ -44,34 +56,50 @@
   margin-left: 3px;
 }
 
-.tx-list-account-wrapper {
-  flex: 3 3 auto;
+.tx-list-account-and-status-wrapper {
+  display: flex;
+  flex: 8 8 auto;
+
+  @media screen and (max-width: $break-small) {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
     align-self: center;
-}
+  }
 
-.tx-list-account {
-  font-size: 16px;
-}
+  @media screen and (min-width: $break-large) {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
 
-.tx-list-status-wrapper {
-  align-self: center;
-  flex: 5 5 auto;
-}
+    .tx-list-account-wrapper {
+      flex: 2 2 auto;
+    }
+
+    .tx-list-status-wrapper {
+      flex: 6 6 auto;
+    }
+  }
 
-.tx-list-status {
+  .tx-list-account {
+    font-size: 16px;
+  }
+
+  .tx-list-status {
     color: $dusty-gray;
     font-size: 16px;
+  }
 }
 
 .tx-list-details-wrapper {
   align-self: center;
   flex: 2 2 auto;
-}
 
-.tx-list-value {
+  .tx-list-value {
     font-size: 16px;
-}
+  }
 
-.tx-list-fiat-value {
+  .tx-list-fiat-value {
     font-size: 12px;
+  }
 }