Final gas customization fixes

1 files changed, 33 insertions, 7 deletions

diff --git a/ui/app/components/sidebars/sidebar-content.scss b/ui/app/components/sidebars/sidebar-content.scss
index 7d1f719dc..ca6b0a458 100644
--- a/ui/app/components/sidebars/sidebar-content.scss
+++ b/ui/app/components/sidebars/sidebar-content.scss
@@ -1,6 +1,11 @@
 .sidebar-left {
+  display: flex;
+
   .gas-modal-page-container {
+    display: flex;
+
     .page-container {
+      flex: 1;
       max-width: 100%;
 
       &__content {
@@ -12,6 +17,10 @@
         max-width: 344px;
         min-height: auto;
       }
+
+      @media screen and (min-width: $break-small) {
+        max-height: none;
+      }
     }
 
     .gas-price-chart {
@@ -34,9 +43,10 @@
     }
 
     .basic-tab-content {
-      height: 318px;
+      height: auto;
       margin-bottom: 0px;
       border-bottom: 1px solid #d2d8dd;
+      flex: 1 1 70%;
 
       @media screen and (max-width: $break-small) {
         padding-left: 14px;
@@ -55,6 +65,10 @@
     }
 
     .advanced-tab {
+      @media screen and (min-width: $break-small) {
+        flex: 1 1 70%;
+      }
+
       &__fee-chart {
         height: 320px;
 
@@ -72,14 +86,26 @@
       }
     }
 
+    .gas-modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
 
-    .gas-modal-content__info-row {
-      height: 170px;
-
-      @media screen and (max-width: $break-small) {
-        height: initial;
+      &__info-row-wrapper {
         display: flex;
-        justify-content: center;
+        @media screen and (min-width: $break-small) {
+          flex: 1 1 30%;
+        }
+      }
+
+      &__info-row {
+        height: 170px;
+
+        @media screen and (max-width: $break-small) {
+          height: initial;
+          display: flex;
+          justify-content: center;
+        }
       }
     }
   }