chore(site): replace usages of --100vh hack with dvh units for mode…

…rn browsers (#2211)
exadel-inc · Feb 6, 2024 · 7194504 · 7194504
1 parent 279fe00
commit 7194504
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -13,10 +13,11 @@
 
     body {
       width: 100%;
-      /* stylelint-disable */
-      height: 100vh;
       height: var(--100vh, 100vh);
-      /* stylelint-enable */
+
+      @supports (height: 100dvh) {
+        height: 100dvh;
+      }
     }
   }