From d8e41a6aa5a4c64538063c6dde7afdf77b0e5793 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Tue, 27 Nov 2018 14:00:41 -0330
Subject: Final gas customization fixes

---
 ui/app/components/sidebars/sidebar-content.scss | 40 ++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 7 deletions(-)

(limited to 'ui/app/components/sidebars/sidebar-content.scss')

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;
+        }
       }
     }
   }
-- 
cgit