Improve responsiveness of customize speed up slider.

3 files changed, 76 insertions, 6 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 9486eaf8f..2532c1fc2 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
@@ -19,6 +19,13 @@
       }
     }
 
+    &__footer {
+      header {
+        padding-top: 12px;
+        padding-bottom: 12px;
+      }
+    }
+
     &__header-close-text {
       font-size: 14px;
       color: #4EADE7;
@@ -82,6 +89,10 @@
     color: $scorpion;
     font-size: 12px;
 
+    @media screen and (max-width: $break-small) {
+      padding: 4px 21px;
+    }
+
     &__send-info, &__transaction-info, &__total-info, &__fiat-total-info {
       display: flex;
       flex-flow: row;
@@ -95,11 +106,19 @@
     &__total-info {
       &__label {
         font-size: 16px;
+
+        @media screen and (max-width: $break-small) {
+          font-size: 14px;
+        }
       }
 
       &__value {
         font-size: 16px;
         font-weight: bold;
+
+        @media screen and (max-width: $break-small) {
+          font-size: 14px;
+        }
       }
     }
 
diff --git a/ui/app/components/sidebars/index.scss b/ui/app/components/sidebars/index.scss
index 6fcd93e99..b9845d564 100644
--- a/ui/app/components/sidebars/index.scss
+++ b/ui/app/components/sidebars/index.scss
@@ -60,6 +60,11 @@
     width: 408px;
     left: calc(100% - 408px);
   }
+
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+    left: 0%;
+  }
 }
 
 .sidebar-overlay {
diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss
index c0973be2c..7d1f719dc 100644
--- a/ui/app/components/sidebars/sidebar-content.scss
+++ b/ui/app/components/sidebars/sidebar-content.scss
@@ -2,10 +2,24 @@
   .gas-modal-page-container {
     .page-container {
       max-width: 100%;
+
+      &__content {
+        display: flex;
+        overflow-y: initial;
+      }
+
+      @media screen and (max-width: $break-small) {
+        max-width: 344px;
+        min-height: auto;
+      }
     }
 
     .gas-price-chart {
       margin-left: 10px;
+
+      &__root {
+        max-height: 160px !important;
+      }
     }
 
     .page-container__bottom {
@@ -20,21 +34,53 @@
     }
 
     .basic-tab-content {
-      height: 377px;
+      height: 318px;
       margin-bottom: 0px;
       border-bottom: 1px solid #d2d8dd;
-    }
 
-    .advanced-tab__fee-chart {
-      height: 320px;
+      @media screen and (max-width: $break-small) {
+        padding-left: 14px;
+        padding-bottom: 21px;
+      }
+
+      .gas-price-button-group--alt {
+        @media screen and (max-width: $break-small) {
+          max-width: 318px;
+
+          &__time-estimate {
+            font-size: 12px;
+          }
+        }
+      }
     }
 
-    .advanced-tab__fee-chart__speed-buttons {
-      bottom: 77px;
+    .advanced-tab {
+      &__fee-chart {
+        height: 320px;
+
+        @media screen and (max-width: $break-small) {
+          height: initial;
+        }
+      }
+
+      &__fee-chart__speed-buttons {
+        bottom: 77px;
+
+        @media screen and (max-width: $break-small) {
+          display: none;
+        }
+      }
     }
 
+
     .gas-modal-content__info-row {
       height: 170px;
+
+      @media screen and (max-width: $break-small) {
+        height: initial;
+        display: flex;
+        justify-content: center;
+      }
     }
   }
 }
\ No newline at end of file