2 files changed, 85 insertions, 9 deletions

diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 808aafb4c..49b432a1f 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -19,17 +19,52 @@ html, body {
   font-weight: 300;
   line-height: 1.4em;
   background: #F7F7F7;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 500px;
+}
+
+.app-root {
+  overflow: hidden;
+  position: relative
+}
+
+.app-primary {
+  display: flex;
 }
 
 input:focus, textarea:focus {
   outline: none;
 }
 
+.full-size {
+  height: 100%;
+  width: 100%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-flex-height {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
 #app-content {
   overflow-x: hidden;
   min-width: 357px;
-  width: 360px;
-  height: 500px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 button, input[type="submit"] {
@@ -130,10 +165,6 @@ h2.page-subtitle {
   margin: 12px;
 }
 
-.app-primary {
-
-}
-
 .app-footer {
   padding-bottom: 10px;
   align-items: center;
@@ -170,7 +201,7 @@ textarea.twelve-word-phrase {
 }
 
 .check {
-  margin-left: 7px;
+  margin-left: 12px;
   color: #F7861C;
   flex: 1 0 auto;
   display: flex;
@@ -403,8 +434,16 @@ input.large-input {
 /* account detail screen */
 
 .account-detail-section {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  flex-direction: inherit;
+}
 
+.grow-tenx {
+  flex-grow: 10;
 }
+
 .name-label{
 
 }
diff --git a/ui/app/css/lib.css b/ui/app/css/lib.css
index 910a24ee2..81647d1c1 100644
--- a/ui/app/css/lib.css
+++ b/ui/app/css/lib.css
@@ -232,12 +232,21 @@ hr.horizontal-line {
   align-items: center;
 }
 
+.tabSection {
+  min-width: 350px;
+}
+
 .menu-icon {
   display: inline-block;
-  height: 9px;
-  min-width: 9px;
+  height: 12px;
+  min-width: 12px;
   margin: 13px;
 }
+
+i.fa.fa-question-circle.fa-lg.menu-icon {
+  font-size: 18px;
+}
+
 .ether-icon {
   background: rgb(0, 163, 68);
   border-radius: 20px;
@@ -266,3 +275,31 @@ hr.horizontal-line {
   margin-top: 20px;
   color: red;
 }
+
+/*
+  Hacky breakpoint fix for account + tab sections
+    Resolves issue from @frankiebee in
+    https://github.com/MetaMask/metamask-extension/pull/1835
+  Please remove this when integrating new designs
+ */
+
+@media screen and (min-width: 575px) and (max-width: 800px) {
+  .account-data-subsection {
+    flex: 0 0 auto !important; // reset flex
+    margin-left: 10px !important; // create additional horizontal space
+    margin-right: 10px !important;
+    width: 40%;
+  }
+
+  .tabSection {
+    flex: 0 0 auto !important;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+    min-width: 285px;
+    width: 49%;
+  }
+
+  .name-label {
+    width: 80%;
+  }
+}