diff --git a/packages/app/public/index.html b/packages/app/public/index.html
index 49fd768c53..ac2e9a6a73 100644
--- a/packages/app/public/index.html
+++ b/packages/app/public/index.html
@@ -51,6 +51,29 @@
       href="%PUBLIC_URL%/safari-pinned-tab.svg"
       color="#5bbad5"
     />
+    <style>
+      @media only screen {
+        html {
+          zoom: 0.7;
+        }
+      }
+
+      @media only screen and (min-width: 800px) {
+        html {
+          zoom: 0.85;
+        }
+      }
+
+      @media only screen and (min-width: 1200px) {
+        html {
+          zoom: 1;
+        }
+      }
+
+      #root {
+        min-height: 100%;
+      }
+    </style>
     <title>Backstage</title>
   </head>
   <body style="margin: 0">
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 3806f1ac96..ad6cd58cd6 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -28,7 +28,7 @@ const useStyles = makeStyles(theme => ({
     gridTemplateColumns: '64px auto',
     gridTemplateRows: '1fr',
     width: '100%',
-    height: '100vh',
+    height: '100%',
   },
 }));
 
diff --git a/packages/app/src/components/SideBar/SideBar.tsx b/packages/app/src/components/SideBar/SideBar.tsx
index 724b2a4a79..92e17d6eb1 100644
--- a/packages/app/src/components/SideBar/SideBar.tsx
+++ b/packages/app/src/components/SideBar/SideBar.tsx
@@ -164,7 +164,7 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexFlow: 'column nowrap',
     alignItems: 'flex-start',
-    position: 'absolute',
+    position: 'fixed',
     left: 0,
     top: 0,
     bottom: 0,
