Make responsive UI more flexy

ui/responsive/app/account-detail.js

@@ -60,6 +60,7 @@ AccountDetailScreen.prototype.render = function () {
       h('.account-data-subsection', {
         style: {
           margin: '0 20px',
+          maxWidth: '320px',
         },
       }, [
 

ui/responsive/app/accounts/index.js

@@ -56,7 +56,6 @@ AccountsScreen.prototype.render = function () {
       // identity selection
       h('section.identity-section', {
         style: {
-          height: '418px',
           overflowY: 'auto',
           overflowX: 'hidden',
         },

ui/responsive/app/app.js

@@ -93,12 +93,7 @@ App.prototype.render = function () {
       }),
 
       // panel content
-      h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
+      h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), [
-        style: {
-          height: '380px',
-          width: '360px',
-        },
-      }, [
         h(ReactCSSTransitionGroup, {
           className: 'css-transition-group',
           transitionName: 'main',

ui/responsive/app/css/index.css

@@ -19,6 +19,14 @@ html, body {
   font-weight: 300;
   line-height: 1.4em;
   background: #F7F7F7;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.css-transition-group {
+  flex: 1;
 }
 
 input:focus, textarea:focus {
@@ -28,8 +36,6 @@ input:focus, textarea:focus {
 #app-content {
   overflow-x: hidden;
   min-width: 357px;
-  width: 360px;
-  height: 500px;
 }
 
 button, input[type="submit"] {
@@ -403,7 +409,8 @@ input.large-input {
 /* account detail screen */
 
 .account-detail-section {
-
+  display: flex;
+  flex-wrap: wrap;
 }
 .name-label{
 

ui/responsive/app/keychains/hd/create-vault-complete.js

@@ -47,8 +47,6 @@ CreateVaultCompleteScreen.prototype.render = function () {
 
       h('div', {
         style: {
-          width: '360px',
-          height: '78px',
           fontSize: '1em',
           marginTop: '10px',
           textAlign: 'center',