Merge pull request #4647 from MetaMask/fix-overflow-currency-display

Fix issues with scrollbar in currency display.

3 files changed, 12 insertions, 2 deletions

diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js
index 9c8ce0044..5e2c5fdf6 100644
--- a/ui/app/components/send/currency-display.js
+++ b/ui/app/components/send/currency-display.js
@@ -118,6 +118,7 @@ CurrencyDisplay.prototype.render = function () {
     readOnly = false,
     inError = false,
     onBlur,
+    step,
   } = this.props
   const { valueToRender } = this.state
 
@@ -149,9 +150,10 @@ CurrencyDisplay.prototype.render = function () {
           } : {}),
           ref: input => { this.currencyInput = input },
           style: {
-            minWidth: this.getInputWidth(valueToRender, readOnly),
+            width: this.getInputWidth(valueToRender, readOnly),
           },
           min: 0,
+          step,
         }),
 
         h('span.currency-display__currency-symbol', primaryCurrency),
diff --git a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
index 8da36d3b7..196538c11 100644
--- a/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
+++ b/ui/app/components/send_/send-content/send-amount-row/send-amount-row.component.js
@@ -95,6 +95,7 @@ export default class SendAmountRow extends Component {
           primaryCurrency={primaryCurrency || 'ETH'}
           selectedToken={selectedToken}
           value={amount}
+          step="any"
         />
       </SendRowWrapper>
     )
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index 3614aa868..b1a74dce2 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -48,15 +48,20 @@
     display: flex;
     flex: 1;
     max-width: 100%;
-    overflow-x: scroll;
+
+    input[type="number"] {
+      -moz-appearance: textfield;
+    }
 
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
+      -moz-appearance: none;
       display: none;
     }
 
     input[type="number"]:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
+      -moz-appearance: none;
       display: none;
     }
   }
@@ -69,11 +74,13 @@
   .react-numeric-input {
     input[type="number"]::-webkit-inner-spin-button {
       -webkit-appearance: none;
+      -moz-appearance: none;
       display: none;
     }
 
     input[type="number"]:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
+      -moz-appearance: none;
       display: none;
     }
   }