Fix gas input styling on mobile view

4 files changed, 34 insertions, 14 deletions

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 710ee24c0..e5bfcfc63 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -198,7 +198,7 @@ CustomizeGasModal.prototype.render = function () {
   })
 
   return h('div.send-v2__customize-gas', {}, [
-    h('div', {
+    h('div.send-v2__customize-gas__content', {
     }, [
       h('div.send-v2__customize-gas__header', {}, [
 
@@ -241,8 +241,9 @@ CustomizeGasModal.prototype.render = function () {
         ]),
         
         h('div.send-v2__customize-gas__revert', {
-          onClick: () => console.log('Revert'),
-        }, ['Revert']),
+          // onClick: () => console.log('Revert'),
+        }, ['']),
+        // }, ['Revert']),
 
         h('div.send-v2__customize-gas__buttons', [
           h('div.send-v2__customize-gas__cancel', {
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 88deb2bb0..e15dd6c1b 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -162,10 +162,9 @@ const MODALS = {
       h(CustomizeGasModal, {}, []),
     ],
     mobileModalStyle: {
-      width: '355px',
-      height: '598px',
-      // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
-      top: '5%',
+      width: '100vw',
+      height: '100vh',
+      top: '0',
       transform: 'none',
       left: '0',
       right: '0',
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 03da5acb6..4a8232e39 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -85,8 +85,10 @@
   background: $athens-grey;
   position: absolute;
   transform: rotate(45deg);
-  left: 178px;
   top: 71px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
 }
 
 .confirm-screen-title {
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 458434de4..a8d46067b 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -274,6 +274,7 @@
   color: #9b9b9b;
   font-size: .8em;
   padding: 1px 4px;
+  cursor: pointer;
 }
 
 .token-gas {
@@ -474,6 +475,7 @@
 
     @media screen and (max-width: $break-small) {
       height: 59px;
+      width: 100vw;
     }
   }
 
@@ -484,10 +486,13 @@
     position: absolute;
     transform: rotate(45deg);
     left: 178px;
-    top: 65px;
+    top: 75px;
 
     @media screen and (max-width: $break-small) {
       top: 46px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
     }
   }
 
@@ -706,8 +711,8 @@
     flex-flow: column;
 
     @media screen and (max-width: $break-small) {
-      width: 355px;
-      height: 598px;
+      width: 100vw;
+      height: 100vh;
     }
 
     &__header {
@@ -717,6 +722,10 @@
       align-items: center;
       justify-content: space-between;
       font-size: 22px;
+
+      @media screen and (max-width: $break-small) {
+        flex: 0 0 auto;
+      }
     }
 
     &__title {
@@ -732,14 +741,19 @@
       margin-right: 19.25px;
     }
 
+    &__content {
+      display: flex;
+      flex-flow: column nowrap;
+      height: 100%;
+    }
+
     &__body {
-      height: 248px;
       display: flex;
+      margin-bottom: 24px;
 
       @media screen and (max-width: $break-small) {
-        width: 355px;
-        height: 470px;
         flex-flow: column;
+        flex: 1 1 auto;
       }
     }
 
@@ -751,6 +765,10 @@
       justify-content: space-between;
       font-size: 22px;
       position: relative;
+
+      @media screen and (max-width: $break-small) {
+        flex: 0 0 auto;
+      }
     }
 
     &__buttons {