Make responsive UI more flexy

5 files changed, 12 insertions, 12 deletions

diff --git a/ui/responsive/app/account-detail.js b/ui/responsive/app/account-detail.js
index bed05a7fb..ff5c2aadb 100644
--- a/ui/responsive/app/account-detail.js
+++ b/ui/responsive/app/account-detail.js
@@ -60,6 +60,7 @@ AccountDetailScreen.prototype.render = function () {
       h('.account-data-subsection', {
         style: {
           margin: '0 20px',
+          maxWidth: '320px',
         },
       }, [
 
diff --git a/ui/responsive/app/accounts/index.js b/ui/responsive/app/accounts/index.js
index ac2615cd7..3e0830b63 100644
--- a/ui/responsive/app/accounts/index.js
+++ b/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',
         },
diff --git a/ui/responsive/app/app.js b/ui/responsive/app/app.js
index 1a63002e1..e7bde9605 100644
--- a/ui/responsive/app/app.js
+++ b/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'), {
-        style: {
-          height: '380px',
-          width: '360px',
-        },
-      }, [
+      h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), [
         h(ReactCSSTransitionGroup, {
           className: 'css-transition-group',
           transitionName: 'main',
diff --git a/ui/responsive/app/css/index.css b/ui/responsive/app/css/index.css
index 808aafb4c..c82c1b21b 100644
--- a/ui/responsive/app/css/index.css
+++ b/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{
 
diff --git a/ui/responsive/app/keychains/hd/create-vault-complete.js b/ui/responsive/app/keychains/hd/create-vault-complete.js
index a318a9b50..c32751fff 100644
--- a/ui/responsive/app/keychains/hd/create-vault-complete.js
+++ b/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',