From 719450430e20b351d6edbcfc0a2ef16e6277575f Mon Sep 17 00:00:00 2001
From: fshovchko <60318924+fshovchko@users.noreply.github.com>
Date: Tue, 6 Feb 2024 14:48:29 +0200
Subject: [PATCH] chore(site): replace usages of `--100vh` hack with dvh units
 for modern browsers (#2211)

---
 site/src/localdev.ts                     | 2 +-
 site/src/navigation/sidebar/sidebar.less | 7 ++++---
 site/src/page/base-layout.less           | 7 ++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/site/src/localdev.ts b/site/src/localdev.ts
index 2174c1697..10a437a8a 100644
--- a/site/src/localdev.ts
+++ b/site/src/localdev.ts
@@ -56,7 +56,7 @@ import {ESLDemoAnchorLink} from './anchor/anchor-link';
 import {ESLDemoBanner} from './banner/banner';
 import {ESLDemoSwipeArea, ESLDemoWheelArea} from './esl-events-demo/esl-events-demo';
 
-ESLVSizeCSSProxy.observe();
+if (!CSS.supports('(height: 100dvh) or (width: 100dvw)')) ESLVSizeCSSProxy.observe();
 
 // Register Demo components
 ESLDemoAutofocus.register();
diff --git a/site/src/navigation/sidebar/sidebar.less b/site/src/navigation/sidebar/sidebar.less
index 3c430c2ea..bcfcc6d02 100644
--- a/site/src/navigation/sidebar/sidebar.less
+++ b/site/src/navigation/sidebar/sidebar.less
@@ -58,11 +58,12 @@ esl-d-sidebar {
   @media @md-xl {
     position: relative;
     top: 0;
-    /* stylelint-disable */
-    height: 100vh;
     height: var(--100vh, 100vh);
-    /* stylelint-enable */
     max-width: 72px;
+
+    @supports (height: 100dvh) {
+      height: 100dvh;
+    }
   }
 
   &.open {
diff --git a/site/src/page/base-layout.less b/site/src/page/base-layout.less
index 0514712b9..3494d21af 100644
--- a/site/src/page/base-layout.less
+++ b/site/src/page/base-layout.less
@@ -13,10 +13,11 @@
 
     body {
       width: 100%;
-      /* stylelint-disable */
-      height: 100vh;
       height: var(--100vh, 100vh);
-      /* stylelint-enable */
+
+      @supports (height: 100dvh) {
+        height: 100dvh;
+      }
     }
   }