Center tooltip on small screen size by using flexbox

3 files changed, 23 insertions, 20 deletions

diff --git a/ui/app/components/gas-tooltip.js b/ui/app/components/gas-tooltip.js
index 4b6472b44..29d1af4ad 100644
--- a/ui/app/components/gas-tooltip.js
+++ b/ui/app/components/gas-tooltip.js
@@ -59,7 +59,12 @@ GasTooltip.prototype.render = function () {
   const { position, title, children, className } = this.props
   const { gasPrice, gasLimit } = this.state
 
-  return h('div', {}, [
+  return h('div', {
+    style: {
+      display: 'flex',
+      justifyContent: 'center',
+    }
+  }, [
     h('div.gas-tooltip-close-area', {
       onClick: this.onClose
     }),
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index edee40821..10b81debe 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -106,7 +106,6 @@
 
 .customize-gas-tooltip-container {
   position: absolute;
-  left: 76px;
   bottom: 50px;
   width: 237px;
   height: 307px;
diff --git a/ui/app/send.js b/ui/app/send.js
index 23216d54c..a65c51d30 100644
--- a/ui/app/send.js
+++ b/ui/app/send.js
@@ -225,6 +225,23 @@ SendTransactionScreen.prototype.render = function () {
         ]),
 
         h('div.send-screen-input-wrapper', {}, [
+          this.state.tooltipIsOpen && h(GasTooltip, {
+            className: 'send-tooltip',
+            gasPrice,
+            gasLimit: gas,
+            onClose: this.closeTooltip,
+            onFeeChange: ({gasLimit, gasPrice}) => {
+              this.setState({
+                newTx: Object.assign(
+                  this.state.newTx,
+                  {
+                    gas: gasLimit,
+                    gasPrice,
+                  }
+                ),
+              })
+            }
+          }),
 
           h('div.send-screen-gas-labels', {}, [
             h('span', {}, [
@@ -276,24 +293,6 @@ SendTransactionScreen.prototype.render = function () {
             ]),
           ]),
 
-          this.state.tooltipIsOpen && h(GasTooltip, {
-            className: 'send-tooltip',
-            gasPrice,
-            gasLimit: gas,
-            onClose: this.closeTooltip,
-            onFeeChange: ({gasLimit, gasPrice}) => {
-              this.setState({
-                newTx: Object.assign(
-                  this.state.newTx,
-                  {
-                    gas: gasLimit,
-                    gasPrice,
-                  }
-                ),
-              })
-            }
-          }),
-
         ]),
 
         h('div.send-screen-input-wrapper', {}, [