Implement mobile-friendly responsive layout with flex wrap

4 files changed, 16 insertions, 4 deletions

diff --git a/ui/app/app.js b/ui/app/app.js
index 4f877bc51..021ef5f27 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -73,7 +73,9 @@ App.prototype.render = function () {
     h('.flex-column.full-height', {
       style: {
         // Windows was showing a vertical scroll bar:
-        overflow: 'hidden',
+        overflowX: 'hidden',
+        // TODO: check with dev who committed L75, see if this still happens, and whether auto is enough
+        // overflowY: 'auto',
         position: 'relative',
         alignItems: 'center',
       },
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index c32e9edcb..bcd30e6d8 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -31,7 +31,11 @@ function TxView () {
 TxView.prototype.render = function () {
   return h('div.tx-view.flex-column', {
     style: {
-      width: '66.666%',
+      // width: '66.666%',
+      flexGrow: 2,
+      flexShrink: 0,
+      flexBasis: '230px', // .666*345
+      // flexBasis: '400px',
       height: '82vh',
       background: '#FFFFFF',
     }
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index b8ea633db..60c2cb5c6 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -28,7 +28,10 @@ WalletView.prototype.render = function () {
 
   return h('div.wallet-view.flex-column', {
     style: {
-      width: '33.333%',
+      // width: '33.333%',
+      flexGrow: 1,
+      flexShrink: 0,
+      flexBasis: '230px', // .333*345
       height: '82vh',
       background: '#FAFAFA', // TODO: add to reusable colors
     }
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 88028f8eb..ae62a0e0c 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -13,7 +13,7 @@ function MainContainer () {
 
 MainContainer.prototype.render = function () {
 
-  return h('div.flex-row', {
+  return h('div', {
     style: {
       position: 'absolute',
       marginTop: '6vh',
@@ -22,6 +22,9 @@ MainContainer.prototype.render = function () {
       boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
       fontFamily: 'DIN OT',
       display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'stretch',
+      overflowY: 'scroll',
     }
   }, [
     h(WalletView, {