fix (mobile-layout) change "vh" to "dvh" for all layouts (#13840)

* Convert all vh units to dvh; fixing layout for mobile browsers such as Chrome for Android.

css/_reactions-menu.scss

@@ -154,17 +154,17 @@ $reactionCount: 20;
 	}
 
 	70% {
-		transform: translate(40px, -70vh) scale(1.5);
+		transform: translate(40px, -70dvh) scale(1.5);
 		opacity: 1;
 	}
 
 	75% {
-		transform: translate(40px, -70vh) scale(1.5);
+		transform: translate(40px, -70dvh) scale(1.5);
 		opacity: 1;
 	}
 
 	100% {
-		transform: translate(140px, -50vh) scale(1);
+		transform: translate(140px, -50dvh) scale(1);
 		opacity: 0;
 	}
 }
@@ -187,17 +187,17 @@ $reactionCount: 20;
 			}
 
 			70% {
-				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
 				opacity: 1;
 			}
 
 			75% {
-				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				transform: translate(#{$topX}px, -#{$topY}dvh) scale(1.5);
 				opacity: 1;
 			}
 
 			100% {
-				transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
+				transform: translate(#{$bottomX}px, -#{$bottomY}dvh) scale(1);
 				opacity: 0;
 			}
 		}

css/_videolayout_default.scss

@@ -266,10 +266,10 @@
     #avatarContainer {
         border-radius: 50%;
         display: inline-block;
-        height: 50vh;
-        margin-top: 25vh;
+        height: 50dvh;
+        margin-top: 25dvh;
         overflow: hidden;
-        width: 50vh;
+        width: 50dvh;
 
         #avatar {
             height: 100%;

css/_welcome_page.scss

@@ -10,7 +10,7 @@ body.welcome-page {
     flex-direction: column;
     font-family: $welcomePageFontFamily;
     justify-content: space-between;
-    min-height: 100vh;
+    min-height: 100dvh;
     position: relative;
 
     .header {

css/deep-linking/_mobile.scss

@@ -1,6 +1,6 @@
 .deep-linking-mobile {
     background-color: #fff;
-    height: 100vh;
+    height: 100dvh;
     overflow: auto;
     position: relative;
     width: 100vw;

react/features/base/ui/constants.web.ts

@@ -139,7 +139,7 @@ export const commonStyles = (theme: Theme) => {
                 alignItems: 'center',
                 background: 'rgba(0,0,0,0.6)',
                 display: 'flex',
-                height: '100vh',
+                height: '100dvh',
                 justifyContent: 'center',
                 left: 0,
                 position: 'absolute' as const,

react/features/chat/components/web/Chat.tsx

@@ -90,7 +90,7 @@ const useStyles = makeStyles()(theme => {
             zIndex: 300,
 
             '@media (max-width: 580px)': {
-                height: '100vh',
+                height: '100dvh',
                 position: 'fixed',
                 left: 0,
                 right: 0,

react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx

@@ -30,7 +30,7 @@ const useStyles = makeStyles()((theme: Theme) => {
         container: {
             background: '#1E1E1E',
             width: '100vw',
-            height: '100vh',
+            height: '100dvh',
             overflowX: 'hidden',
             overflowY: 'auto',
             justifyContent: 'center',

react/features/invite/components/dial-in-summary/web/DialInSummary.tsx

@@ -93,7 +93,7 @@ const styles = (theme: Theme) => {
             color: theme.palette.text01
         },
         scrollable: {
-            height: '100vh',
+            height: '100dvh',
             overflowY: 'scroll' as const
         },
         roomName: {

react/features/participants-pane/components/web/ParticipantsPane.tsx

@@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => {
             },
 
             '@media (max-width: 580px)': {
-                height: '100vh',
+                height: '100dvh',
                 position: 'fixed',
                 left: 0,
                 right: 0,

react/features/settings/components/web/audio/AudioSettingsContent.tsx

@@ -98,7 +98,7 @@ const useStyles = makeStyles()(theme => {
             right: 'auto',
             margin: 0,
             marginBottom: theme.spacing(1),
-            maxHeight: 'calc(100vh - 100px)',
+            maxHeight: 'calc(100dvh - 100px)',
             overflow: 'auto',
             width: '300px'
         },

react/features/settings/components/web/video/VideoSettingsContent.tsx

@@ -62,7 +62,7 @@ export interface IProps {
 const useStyles = makeStyles()(theme => {
     return {
         container: {
-            maxHeight: 'calc(100vh - 100px)',
+            maxHeight: 'calc(100dvh - 100px)',
             overflow: 'auto',
             margin: 0,
             marginBottom: theme.spacing(1),

react/features/toolbox/components/web/Drawer.tsx

@@ -37,7 +37,7 @@ interface IProps {
 const useStyles = makeStyles()(theme => {
     return {
         drawerMenuContainer: {
-            height: '100vh',
+            height: '100dvh',
             display: 'flex',
             alignItems: 'flex-end'
         },

react/features/toolbox/components/web/OverflowMenuButton.tsx

@@ -80,7 +80,7 @@ const useStyles = makeStyles<{ overflowDrawer: boolean; reactionsMenuHeight: num
             right: 'auto',
             margin: 0,
             marginBottom: '8px',
-            maxHeight: overflowDrawer ? undefined : 'calc(100vh - 100px)',
+            maxHeight: overflowDrawer ? undefined : 'calc(100dvh - 100px)',
             paddingBottom: overflowDrawer ? undefined : 0,
             minWidth: '240px',
             overflow: 'hidden'
@@ -88,7 +88,7 @@ const useStyles = makeStyles<{ overflowDrawer: boolean; reactionsMenuHeight: num
         content: {
             position: 'relative',
             maxHeight: overflowDrawer
-                ? `calc(100% - ${reactionsMenuHeight}px - 16px)` : `calc(100vh - 100px - ${reactionsMenuHeight}px)`,
+                ? `calc(100% - ${reactionsMenuHeight}px - 16px)` : `calc(100dvh - 100px - ${reactionsMenuHeight}px)`,
             overflowY: 'auto'
         },
         footer: {

react/features/toolbox/components/web/Toolbox.tsx

@@ -153,7 +153,7 @@ const useStyles = makeStyles()(() => {
             right: 'auto',
             margin: 0,
             marginBottom: '8px',
-            maxHeight: 'calc(100vh - 100px)',
+            maxHeight: 'calc(100dvh - 100px)',
             minWidth: '240px'
         },
 

react/features/toolbox/constants.ts

@@ -36,7 +36,7 @@ export const NOT_APPLICABLE = 'N/A';
 
 export const TOOLBAR_TIMEOUT = 4000;
 
-export const DRAWER_MAX_HEIGHT = '80vh - 64px';
+export const DRAWER_MAX_HEIGHT = '80dvh - 64px';
 
 export const NOTIFY_CLICK_MODE = {
     ONLY_NOTIFY: 'ONLY_NOTIFY',