diff --git a/site/src/localdev.ts b/site/src/localdev.ts
index a5d0e6619..10a437a8a 100644
--- a/site/src/localdev.ts
+++ b/site/src/localdev.ts
@@ -11,6 +11,7 @@ import '@exadel/esl/modules/lib';
 import './common/breakpoints';
 
 import {
+  ESLVSizeCSSProxy,
   ESLImage,
   ESLMedia,
   ESLToggleable,
@@ -55,6 +56,8 @@ import {ESLDemoAnchorLink} from './anchor/anchor-link';
 import {ESLDemoBanner} from './banner/banner';
 import {ESLDemoSwipeArea, ESLDemoWheelArea} from './esl-events-demo/esl-events-demo';
 
+if (!CSS.supports('(height: 100dvh) or (width: 100dvw)')) ESLVSizeCSSProxy.observe();
+
 // Register Demo components
 ESLDemoAutofocus.register();
 ESLDemoSidebar.register();
diff --git a/site/src/navigation/sidebar/sidebar.less b/site/src/navigation/sidebar/sidebar.less
index b0e324484..bcfcc6d02 100644
--- a/site/src/navigation/sidebar/sidebar.less
+++ b/site/src/navigation/sidebar/sidebar.less
@@ -58,7 +58,7 @@ esl-d-sidebar {
   @media @md-xl {
     position: relative;
     top: 0;
-    height: 100vh;
+    height: var(--100vh, 100vh);
     max-width: 72px;
 
     @supports (height: 100dvh) {
diff --git a/site/src/page/base-layout.less b/site/src/page/base-layout.less
index efea5bfd4..3494d21af 100644
--- a/site/src/page/base-layout.less
+++ b/site/src/page/base-layout.less
@@ -13,7 +13,7 @@
 
     body {
       width: 100%;
-      height: 100vh;
+      height: var(--100vh, 100vh);
 
       @supports (height: 100dvh) {
         height: 100dvh;