Improve text positioning on mobile view

ui/app/components/tx-list.js

@@ -134,19 +134,21 @@ TxList.prototype.renderTransactionListItem = function () {
         })
       ]),
 
-      h('div.tx-list-account-wrapper', {
+      h('div.tx-list-account-and-status-wrapper', {}, [
-        style: {}
+        h('div.tx-list-account-wrapper', {
-      }, [
+          style: {}
-        h('span.tx-list-account', {}, [
+        }, [
-          '0x82df11be...7684', //address
+          h('span.tx-list-account', {}, [
+            '0x82df11be...7684', //address
+          ]),
         ]),
-      ]),
 
-      h('div.tx-list-status-wrapper', {
+        h('div.tx-list-status-wrapper', {
-        style: {}
+          style: {}
-      }, [
+        }, [
-        h('span.tx-list-status', {}, [
+          h('span.tx-list-status', {}, [
-          transactionStatus,
+            transactionStatus,
+          ]),
         ]),
       ]),
 

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;
-  margin: 0em 1.3em 0em 1.3em;
+  @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;
-  margin-top: 6px;
+  @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 {
+.tx-list-account-and-status-wrapper {
-  flex: 3 3 auto;
+  display: flex;
-  align-self: center;
+  flex: 8 8 auto;
-}
 
-.tx-list-account {
+  @media screen and (max-width: $break-small) {
-  font-size: 16px;
+    flex-direction: column;
-}
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: center;
+  }
 
-.tx-list-status-wrapper {
+  @media screen and (min-width: $break-large) {
-  align-self: center;
+    flex-direction: row;
-  flex: 5 5 auto;
+    justify-content: flex-start;
-}
+    align-items: center;
 
-.tx-list-status {
+    .tx-list-account-wrapper {
-  color: $dusty-gray;
+      flex: 2 2 auto;
-  font-size: 16px;
+    }
+
+    .tx-list-status-wrapper {
+      flex: 6 6 auto;
+    }
+  }
+
+  .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;
+    font-size: 16px;
-}
+  }
 
-.tx-list-fiat-value {
+  .tx-list-fiat-value {
-  font-size: 12px;
+    font-size: 12px;
+  }
 }