From d5411e772d1efd8d723eb81403fa22b03b904f49 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Thu, 8 Nov 2018 12:33:31 -0330
Subject: Make gas customization modal responsive.

---
 .../gas-customization/gas-modal-page-container/index.scss         | 8 ++++++++
 .../gas-customization/gas-price-button-group/index.scss           | 8 ++++++++
 ui/app/components/gas-customization/gas-price-chart/index.scss    | 5 +++++
 ui/app/components/page-container/index.scss                       | 6 +++++-
 ui/app/css/itcss/components/newui-sections.scss                   | 1 +
 ui/app/css/itcss/components/send.scss                             | 1 +
 ui/app/css/itcss/generic/index.scss                               | 4 ++++
 7 files changed, 32 insertions(+), 1 deletion(-)

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 debd9b5ee..9486eaf8f 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
@@ -6,6 +6,10 @@
     max-width: 391px;
     min-height: 585px;
 
+    @media screen and (max-width: $break-small) {
+      max-width: 344px;
+    }
+
     &__header {
       padding: 0px;
       padding-top: 16px;
@@ -60,6 +64,10 @@
 }
 
 .gas-modal-content {
+  @media screen and (max-width: $break-small) {
+    width: 100%;
+  }
+
   &__basic-tab {
     height: 219px;
   }
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 22661ed7b..6e9d01c6e 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,6 +67,10 @@
   justify-content: stretch;
   max-width: 260px;
 
+  @media screen and (max-width: $break-small) {
+    max-width: 230px;
+  }
+
   &__button-fiat-price {
     font-size: 13px;
   }
@@ -98,6 +102,10 @@
     padding-top: 9px;
     padding-left: 8.5px;
 
+    @media screen and (max-width: $break-small) {
+      padding-left: 4px;
+    }
+
     div {
       display: flex;
       flex-flow: column;
diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss
index 0990d6abb..097543104 100644
--- a/ui/app/components/gas-customization/gas-price-chart/index.scss
+++ b/ui/app/components/gas-customization/gas-price-chart/index.scss
@@ -1,12 +1,17 @@
 .gas-price-chart {
   display: flex;
   position: relative;
+  justify-content: center;
 
   &__root {
     max-height: 154px;
     max-width: 391px;
     position: relative;
     overflow: hidden;
+
+    @media screen and (max-width: $break-small) {
+      max-width: 326px;
+    }
   }
 
   .tick text, .c3-axis-x-label, .c3-axis-y-label {
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index ba1215e84..1634ab012 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -194,10 +194,14 @@
   .page-container {
     height: 100%;
     width: 100%;
-    overflow-y: auto;
     background-color: $white;
     border-radius: 0;
     flex: 1;
+
+    &__content {
+      display: flex;
+      overflow-y: initial;
+    }
   }
 }
 
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 233e781ef..b4b77ba1e 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -216,6 +216,7 @@ $wallet-view-bg: $alabaster;
 
   .main-container-wrapper {
     height: 100%;
+    width: 100%;
   }
 }
 
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 4535ced52..ba7db7aa8 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -530,6 +530,7 @@
     @media screen and (max-width: $break-small) {
       margin: 0;
       flex: 1 1 auto;
+      width: 100%;
     }
   }
 
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index d1c65afed..d8e62c97a 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -18,6 +18,10 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+
+  @media screen and (max-width: $break-small) {
+    overflow-y: overlay;
+  }
 }
 
 html {
-- 
cgit