Fix styling of send screen in extension view when hex data on.

4 files changed, 17 insertions, 12 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/index.scss b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
index 6c76f1bdd..efba24e02 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/index.scss
+++ b/ui/app/components/gas-customization/gas-modal-page-container/index.scss
@@ -5,9 +5,15 @@
   .page-container {
     max-width: 391px;
     min-height: 585px;
+    overflow-y: initial;
 
     @media screen and (max-width: $break-small) {
       max-width: 344px;
+
+      &__content {
+        display: flex;
+        overflow-y: initial;
+      }
     }
 
     &__header {
diff --git a/ui/app/components/gas-customization/gas-price-button-group/index.scss b/ui/app/components/gas-customization/gas-price-button-group/index.scss
index 0d1450594..c8b31fc83 100644
--- a/ui/app/components/gas-customization/gas-price-button-group/index.scss
+++ b/ui/app/components/gas-customization/gas-price-button-group/index.scss
@@ -67,10 +67,6 @@
   justify-content: stretch;
   max-width: 260px;
 
-  @media screen and (max-width: $break-small) {
-    max-width: 230px;
-  }
-
   &__button-fiat-price {
     font-size: 13px;
   }
@@ -85,10 +81,18 @@
 
   &__primary-currency {
     font-size: 12px;
+
+    @media screen and (max-width: 575px) {
+      font-size: 10px;
+    }
   }
 
   &__secondary-currency {
     font-size: 12px;
+
+    @media screen and (max-width: 575px) {
+      font-size: 10px;
+    }
   }
 
   &__loading-container {
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 1634ab012..6fc97820a 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-flow: column;
   border-radius: 8px;
+  overflow-y: auto;
 
   &__header {
     display: flex;
@@ -197,11 +198,7 @@
     background-color: $white;
     border-radius: 0;
     flex: 1;
-
-    &__content {
-      display: flex;
-      overflow-y: initial;
-    }
+    overflow-y: auto;
   }
 }
 
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index ba7db7aa8..19e840094 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -530,7 +530,6 @@
     @media screen and (max-width: $break-small) {
       margin: 0;
       flex: 1 1 auto;
-      width: 100%;
     }
   }
 
@@ -580,7 +579,7 @@
     font-family: Roboto;
     font-size: 16px;
     line-height: 22px;
-    width: 112px;
+    width: 88px;
     font-weight: 400;
     flex: 0 0 auto;
   }
@@ -623,7 +622,6 @@
 
   &__to-autocomplete {
     position: relative;
-    max-width: 260px;
 
     &__down-caret {
       z-index: 1026;