remove calc() from styles

Fixes #20
Expensify · Aug 9, 2020 · 74d5455 · 74d5455
1 parent 8df561f
commit 74d5455
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
@@ -12,10 +12,10 @@ import Main from './MainView';
 const App = () => (
     <>
         <StatusBar barStyle="dark-content" />
-        <SafeAreaView>
-            <View>
+        <SafeAreaView style={[styles.flex1, styles.h100p]}>
+            <View style={[styles.flexColumn, styles.h100p]}>
                 <Header />
-                <View style={[styles.flexRow, styles.mainContentWrapper]}>
+                <View style={[styles.flex1, styles.flexRow]}>
                     <Sidebar />
                     <Main />
                 </View>

diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
@@ -8,12 +8,18 @@ const styles = StyleSheet.create({
     p1: {
         padding: 10,
     },
+    h100p: {
+        height: '100%',
+    },
     flex1: {
         flex: 1,
     },
     flexRow: {
         flexDirection: 'row',
     },
+    flexColumn: {
+        flexDirection: 'column',
+    },
     flexGrow1: {
         flexGrow: 1,
     },
@@ -31,9 +37,6 @@ const styles = StyleSheet.create({
     navText: {
         padding: 8,
     },
-    mainContentWrapper: {
-        height: 'calc(100vh - 73px)',
-    },
 });
 
 export default styles;
diff --git a/web/index.html b/web/index.html
@@ -2,6 +2,15 @@
 <html lang="en">
 <head>
     <title>Chat</title>
+    <style>
+        html,
+        body,
+        #root,
+        #root > div,
+        #root > div > div {
+            height: 100% !important;
+        }
+    </style>
 </head>
 <body>
     <div id="root"></div>