diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index 31a88517b..77e175fa0 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -95,7 +95,7 @@ export default class MobileLayout {
         return new FlexContainer('row').cssBlock(MOBILE_CSS)
             .setParent(appContext)
             .id('root-widget')
-            .css('height', '100vh')
+            .css('height', '100%')
             .child(new ScreenContainer("tree", 'column')
                 .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
                 .css("max-height", "100%")
diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js
index 1922144d6..b42d40640 100644
--- a/src/public/app/widgets/containers/root_container.js
+++ b/src/public/app/widgets/containers/root_container.js
@@ -7,7 +7,7 @@ export default class RootContainer extends FlexContainer {
         super('row');
 
         this.id('root-widget');
-        this.css('height', '100vh');
+        this.css('height', '100%');
     }
 
     refresh() {
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index c76a4271a..940e13d87 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -18,9 +18,11 @@ body {
        on the last line of the editor. */
     position: fixed;
     width: 100%;
+    height: 100%;
     background-color: var(--main-background-color);
     color: var(--main-text-color);
     font-family: var(--main-font-family);
+    font-size: var(--main-font-size);
 }
 
 a, a:visited, a:hover {
@@ -714,10 +716,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     border-color: var(--main-border-color) !important;
 }
 
-body {
-    font-size: var(--main-font-size);
-}
-
 .gutter {
     background: linear-gradient(to bottom, transparent, var(--accented-background-color), transparent);
 }