Make main account detail view more responsive

6 files changed, 32 insertions, 8 deletions

diff --git a/responsive-ui/app/account-detail.js b/responsive-ui/app/account-detail.js
index da1ddf98b..b39252db6 100644
--- a/responsive-ui/app/account-detail.js
+++ b/responsive-ui/app/account-detail.js
@@ -51,7 +51,12 @@ AccountDetailScreen.prototype.render = function () {
 
   return (
 
-    h('.account-detail-section', [
+    h('.account-detail-section', {
+      style: {
+        height: '100%',
+        maxWidth: '850px',
+      },
+    }, [
 
       // identicon, label, balance, etc
       h('.account-data-subsection', {
@@ -236,7 +241,9 @@ AccountDetailScreen.prototype.subview = function () {
 AccountDetailScreen.prototype.tabSections = function () {
   const { currentAccountTab } = this.props
 
-  return h('section.tabSection', [
+  return h('section.tabSection', {
+    style: { height: '100%' },
+  }, [
 
     h(TabBar, {
       tabs: [
diff --git a/responsive-ui/app/actions.js b/responsive-ui/app/actions.js
index 2c60448dd..d99291e46 100644
--- a/responsive-ui/app/actions.js
+++ b/responsive-ui/app/actions.js
@@ -1,4 +1,4 @@
-const getBuyEthUrl = require('../../../app/scripts/lib/buy-eth-url')
+const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
diff --git a/responsive-ui/app/app.js b/responsive-ui/app/app.js
index 1cfa2d7a9..d1a20f079 100644
--- a/responsive-ui/app/app.js
+++ b/responsive-ui/app/app.js
@@ -77,6 +77,8 @@ App.prototype.render = function () {
         // Windows was showing a vertical scroll bar:
         overflow: 'hidden',
         position: 'relative',
+        height: '100%',
+        alignItems: 'center',
       },
     }, [
 
@@ -91,7 +93,12 @@ 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: '100%',
+          maxWidth: '850px',
+        },
+      }, [
         h(ReactCSSTransitionGroup, {
           className: 'css-transition-group',
           transitionName: 'main',
@@ -116,7 +123,11 @@ App.prototype.renderAppBar = function () {
 
   return (
 
-    h('div', [
+    h('div', {
+      style: {
+        width: '100%'
+      },
+    }, [
 
       h('.app-header.flex-row.flex-space-between', {
         style: {
diff --git a/responsive-ui/app/components/pending-tx.js b/responsive-ui/app/components/pending-tx.js
index 962680d30..d7d602f31 100644
--- a/responsive-ui/app/components/pending-tx.js
+++ b/responsive-ui/app/components/pending-tx.js
@@ -6,7 +6,7 @@ const clone = require('clone')
 
 const ethUtil = require('ethereumjs-util')
 const BN = ethUtil.BN
-const hexToBn = require('../../../../app/scripts/lib/hex-to-bn')
+const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 const util = require('../util')
 const MiniAccountPanel = require('./mini-account-panel')
 const Copyable = require('./copyable')
diff --git a/responsive-ui/app/components/transaction-list.js b/responsive-ui/app/components/transaction-list.js
index 3b4ba741e..ae6aaec8c 100644
--- a/responsive-ui/app/components/transaction-list.js
+++ b/responsive-ui/app/components/transaction-list.js
@@ -24,7 +24,11 @@ TransactionList.prototype.render = function () {
 
   return (
 
-    h('section.transaction-list', [
+    h('section.transaction-list', {
+      style: {
+        height: '100%',
+      },
+    }, [
 
       h('style', `
         .transaction-list .transaction-list-item:not(:last-of-type) {
@@ -39,7 +43,7 @@ TransactionList.prototype.render = function () {
       h('.tx-list', {
         style: {
           overflowY: 'auto',
-          height: '300px',
+          height: '100%',
           padding: '0 20px',
           textAlign: 'center',
         },
diff --git a/responsive-ui/app/css/index.css b/responsive-ui/app/css/index.css
index c82c1b21b..2ae92bbd6 100644
--- a/responsive-ui/app/css/index.css
+++ b/responsive-ui/app/css/index.css
@@ -27,6 +27,7 @@ html, body {
 
 .css-transition-group {
   flex: 1;
+  height: 100%;
 }
 
 input:focus, textarea:focus {
@@ -36,6 +37,7 @@ input:focus, textarea:focus {
 #app-content {
   overflow-x: hidden;
   min-width: 357px;
+  height: 100%;
 }
 
 button, input[type="submit"] {