Merge pull request #41 from co2-git/feature/40

Fix #40

Author: co2-git

app/components/App/App.js

@@ -3,38 +3,39 @@ import {connect} from 'react-redux';
 import React from 'react';
 import SwipeableViews from 'react-swipeable-views';
 
+import {appMainStyle, appTabStyle, appTopBarStyle} from '../../styles/main';
+import AndroidHome from '../Android/Home';
 import AppBar from './AppBar';
 import AppBottomBar from './AppBottomBar';
 import Info from '../ReactNative/Info';
 import Page from '../Layout/Page';
-import AndroidHome from '../Android/Home';
 
 const App = ({app, index}: $AppProps) => (
   <Page style={{display: 'flex', flexDirection: 'column'}}>
-    <div style={{flexShrink: 0}}>
+    <div style={appTopBarStyle}>
       <AppBar app={app} />
     </div>
-    <div style={{flexGrow: 2, overflow: 'auto'}}>
+    <div style={appMainStyle}>
       <SwipeableViews index={index}>
-        <div>
+        <div style={appTabStyle}>
           <Info app={app} />
         </div>
-        <div>
+        <div style={appTabStyle}>
           Start
         </div>
-        <div>
+        <div style={appTabStyle}>
           <AndroidHome app={app} />
         </div>
-        <div>
+        <div style={appTabStyle}>
           iOS
         </div>
-        <div>
+        <div style={appTabStyle}>
           Upgrade
         </div>
-        <div>
+        <div style={appTabStyle}>
           Native
         </div>
-        <div>
+        <div style={appTabStyle}>
           Eject
         </div>
       </SwipeableViews>

app/styles/main.js

@@ -36,3 +36,19 @@ export const lightInfoMessage = {
   marginLeft: adjustWithCard,
   marginRight: adjustWithCard,
 };
+
+export const appTopBarStyle = {
+  flexShrink: 0,
+};
+
+export const appMainStyle = {
+  flexGrow: 2,
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+};
+
+export const appTabStyle = {
+  overflow: 'auto',
+  boxSizing: 'border-box',
+  height: 'calc(100vh - 120px)',
+};