Lots of flex rearrangement on account detail view

Includes removal of ReactCssTransitionGroup for a simpler UI refactor.

1 files changed, 39 insertions, 7 deletions

diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 2ae92bbd6..00d4bea93 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -25,19 +25,48 @@ html, body {
   padding: 0;
 }
 
-.css-transition-group {
-  flex: 1;
-  height: 100%;
+html {
+  min-height: 400px;
+}
+
+.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;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 button, input[type="submit"] {
@@ -138,10 +167,6 @@ h2.page-subtitle {
   margin: 12px;
 }
 
-.app-primary {
-
-}
-
 .app-footer {
   padding-bottom: 10px;
   align-items: center;
@@ -413,7 +438,14 @@ input.large-input {
 .account-detail-section {
   display: flex;
   flex-wrap: wrap;
+  overflow-y: auto;
+  flex-direction: inherit;
 }
+
+.grow-tenx {
+  flex-grow: 10;
+}
+
 .name-label{
 
 }