Fixes mobile styling.

ui/app/components/send/gas-fee-display-v2.js

@@ -17,7 +17,7 @@ GasFeeDisplay.prototype.render = function () {
     onClick,
   } = this.props
 
-  return h('div', [
+  return h('div.send-v2__gas-fee-display', [
 
     gasTotal
       ? h(CurrencyDisplay, {

ui/app/css/itcss/components/currency-display.scss

@@ -1,6 +1,6 @@
 .currency-display {
   height: 54px;
-  width: 240px;
+  width: 100%ß;
   border: 1px solid $alto;
   border-radius: 4px;
   background-color: $white;

ui/app/css/itcss/components/send.scss

@@ -414,7 +414,6 @@
 
     @media screen and (max-width: $break-small) {
       width: 100%;
-      overflow-y: auto;
       top: 0;
       box-shadow: none;
     }
@@ -457,6 +456,10 @@
     left: 199px;
     border-radius: 50%;
     z-index: 100;
+
+    @media screen and (max-width: $break-small) {
+      top: 36px;
+    }
   }
 
   &__header {
@@ -467,6 +470,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    @media screen and (max-width: $break-small) {
+      height: 59px;
+    }
   }
 
   &__header-tip {
@@ -477,6 +484,10 @@
     transform: rotate(45deg);
     left: 178px;
     top: 65px;
+
+    @media screen and (max-width: $break-small) {
+      top: 46px;
+    }
   }
 
   &__title {
@@ -509,32 +520,47 @@
   }
 
   &__form {
-    display: flex;
-    flex-direction: column;
     margin-top: 13px;
     width: 100%;
+
+    @media screen and (max-width: $break-small) {
+      margin-top: 0px;
+      height: 407px;
+      overflow-y: auto;
+    }
+  }
+
+  &__form-header, &__form-header-copy {
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
   }
 
   &__form-row {
     margin: 14.5px 18px 0px;
-    display: flex;
     position: relative;
+    display: flex;
+    flex-flow: row;
+    flex: 1 0 auto;
     justify-content: space-between;
   }
 
+  &__form-field {
+    flex: 1 1 auto;
+  }
+
   &__form-label {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 22px;
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
+    width: 88px;
   }
 
   &__from-dropdown {
     height: 73px;
-    width: 240px;
+    width: 100%;
     border: 1px solid $alto;
     border-radius: 4px;
     background-color: $white;
@@ -570,7 +596,7 @@
   &__to-autocomplete, &__memo-text-area {
     &__input {
       height: 54px;
-      width: 240px;
+      width: 100%;
       border: 1px solid $alto;
       border-radius: 4px;
       background-color: $white;
@@ -583,6 +609,10 @@
     }
   }
 
+  &__gas-fee-display {
+    width: 100%;
+  }
+
   &__sliders-icon-container {
     display: flex;
     align-items: center;
@@ -616,7 +646,7 @@
     justify-content: space-evenly;
     align-items: center;
     border-top: 1px solid $alto;
-    margin-top: 29px;
+    background: $white;
   }
 
   &__next-btn,

ui/app/send-v2.js

@@ -103,7 +103,7 @@ SendTransactionScreen.prototype.renderCopy = function () {
 
   const tokenText = selectedToken ? 'tokens' : 'ETH'
 
-  return h('div', [
+  return h('div.send-v2__form-header-copy', [
 
     h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`),
 
@@ -126,9 +126,6 @@ SendTransactionScreen.prototype.renderHeader = function () {
 
     ]),
 
-    this.renderTitle(),
-
-    this.renderCopy(),
   ])
 }
 
@@ -157,6 +154,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
 
     h('div.send-v2__form-label', 'From:'),
 
+    h('div.send-v2__form-field', [
       h(FromDropdown, {
         dropdownOpen,
         accounts: fromAccounts,
@@ -166,6 +164,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
         closeDropdown: () => this.setState({ dropdownOpen: false }),
         conversionRate,
       }),
+    ]),
 
   ])
 }
@@ -199,12 +198,14 @@ SendTransactionScreen.prototype.renderToRow = function () {
 
     ]),
 
+    h('div.send-v2__form-field', [
       h(ToAutoComplete, {
         to,
         accounts: toAccounts,
         onChange: this.handleToChange,
         inError: Boolean(errors.to),
       }),
+    ]),
 
   ])
 }
@@ -245,7 +246,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
       conversionRate: amountConversionRate,
     },
   )
-  console.log(`sufficientBalance`, sufficientBalance);
+
   const amountLessThanZero = conversionGreaterThan(
     { value: 0, fromNumericBase: 'dec' },
     { value: amount, fromNumericBase: 'hex' },
@@ -277,6 +278,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
       this.renderErrorMessage('amount'),
     ]),
 
+    h('div.send-v2__form-field', [
       h(CurrencyDisplay, {
         inError: Boolean(errors.amount),
         primaryCurrency,
@@ -287,6 +289,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
         handleChange: this.handleAmountChange,
         validate: this.validateAmount,
       }),
+    ]),
 
   ])
 }
@@ -302,6 +305,8 @@ SendTransactionScreen.prototype.renderGasRow = function () {
 
     h('div.send-v2__form-label', 'Gas fee:'),
 
+    h('div.send-v2__form-field', [
+
       h(GasFeeDisplay, {
         gasTotal,
         conversionRate,
@@ -312,7 +317,9 @@ SendTransactionScreen.prototype.renderGasRow = function () {
         onClick: showCustomizeGasModal,
       }, [
         h('i.fa.fa-sliders.send-v2__sliders-icon'),
-    ])          
+      ]),
+
+    ]),          
 
   ])
 }
@@ -325,10 +332,12 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 
     h('div.send-v2__form-label', 'Transaction Memo:'),
 
+    h('div.send-v2__form-field', [
       h(MemoTextArea, {
         memo,
         onChange: (event) => updateSendMemo(event.target.value),
-    }),
+      })
+    ]),
 
   ])
 }
@@ -336,6 +345,14 @@ SendTransactionScreen.prototype.renderMemoRow = function () {
 SendTransactionScreen.prototype.renderForm = function () {
   return h('div.send-v2__form', {}, [
 
+    h('div.sendV2__form-header', [
+
+      this.renderTitle(),
+
+      this.renderCopy(),
+
+    ]),
+
     this.renderFromRow(),
 
     this.renderToRow(),