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; + } } }