diff --git a/src/renderer/_vue/assets/css/app.scss b/src/renderer/_vue/assets/css/app.scss
index 93642f0b0a..ed8e19eb68 100644
--- a/src/renderer/_vue/assets/css/app.scss
+++ b/src/renderer/_vue/assets/css/app.scss
@@ -205,7 +205,7 @@ h1, h2, h3, h4, h5, h6{
   display: none;
 
   > iframe {
-    height: 100%;
+    height: calc(100% - var(--lens-bottom-bar-height));
     border: none;
   }
 }
diff --git a/src/renderer/_vue/assets/css/custom.scss b/src/renderer/_vue/assets/css/custom.scss
index ae424d106e..45c9eb7a8d 100644
--- a/src/renderer/_vue/assets/css/custom.scss
+++ b/src/renderer/_vue/assets/css/custom.scss
@@ -9,7 +9,7 @@ $lens-text-color-light: #a0a0a0 !default;
 $lens-primary: #3d90ce !default;
 
 // export as css variables
-* {
+:root {
   --lens-main-bg: #{$lens-main-bg}; // dark bg
   --lens-pane-bg: #{$lens-pane-bg}; // all panels main bg
   --lens-dock-bg: #{$lens-dock-bg}; // terminal and top menu bar
@@ -18,6 +18,7 @@ $lens-primary: #3d90ce !default;
   --lens-text-color: #{$lens-text-color};
   --lens-text-color-light: #{$lens-text-color-light};
   --lens-primary: #{$lens-primary};
+  --lens-bottom-bar-height: 20px;
 }
 
 // Base grayscale colors definitions
diff --git a/src/renderer/_vue/components/BottomBar/BottomBar.vue b/src/renderer/_vue/components/BottomBar/BottomBar.vue
index 5faffdb74d..6cfa1042aa 100644
--- a/src/renderer/_vue/components/BottomBar/BottomBar.vue
+++ b/src/renderer/_vue/components/BottomBar/BottomBar.vue
@@ -63,7 +63,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 20px;
+  height: var(--lens-bottom-bar-height);
   background-color: var(--lens-primary);
   z-index: 2000;
 }