From f74b6cd82f7ccb8ee2164db497b88ee45078a640 Mon Sep 17 00:00:00 2001 From: Thomas Egebrand Gram Date: Wed, 20 Sep 2023 11:19:54 +0200 Subject: [PATCH] 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 | 12 ++++++------ css/_videolayout_default.scss | 6 +++--- css/_welcome_page.scss | 2 +- css/deep-linking/_mobile.scss | 2 +- react/features/base/ui/constants.web.ts | 2 +- react/features/chat/components/web/Chat.tsx | 2 +- .../components/DeepLinkingMobilePage.web.tsx | 2 +- .../components/dial-in-summary/web/DialInSummary.tsx | 2 +- .../components/web/ParticipantsPane.tsx | 2 +- .../components/web/audio/AudioSettingsContent.tsx | 2 +- .../components/web/video/VideoSettingsContent.tsx | 2 +- react/features/toolbox/components/web/Drawer.tsx | 2 +- .../toolbox/components/web/OverflowMenuButton.tsx | 4 ++-- react/features/toolbox/components/web/Toolbox.tsx | 2 +- react/features/toolbox/constants.ts | 2 +- 15 files changed, 23 insertions(+), 23 deletions(-) diff --git a/css/_reactions-menu.scss b/css/_reactions-menu.scss index ec93589b25..675668e968 100644 --- a/css/_reactions-menu.scss +++ b/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; } } diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 17f56b997f..81be8af50f 100644 --- a/css/_videolayout_default.scss +++ b/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%; diff --git a/css/_welcome_page.scss b/css/_welcome_page.scss index fcd8f72a3e..ba8334a6e0 100644 --- a/css/_welcome_page.scss +++ b/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 { diff --git a/css/deep-linking/_mobile.scss b/css/deep-linking/_mobile.scss index 0b93e45e89..52e8e41fa1 100644 --- a/css/deep-linking/_mobile.scss +++ b/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; diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index 6d3709b8c9..e15bcad9a0 100644 --- a/react/features/base/ui/constants.web.ts +++ b/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, diff --git a/react/features/chat/components/web/Chat.tsx b/react/features/chat/components/web/Chat.tsx index 47f40db9b1..dd801ca01b 100644 --- a/react/features/chat/components/web/Chat.tsx +++ b/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, diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx b/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx index 3855642d04..2821ed8ba0 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx +++ b/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', diff --git a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx b/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx index 2101aa2431..5f1df44089 100644 --- a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx +++ b/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: { diff --git a/react/features/participants-pane/components/web/ParticipantsPane.tsx b/react/features/participants-pane/components/web/ParticipantsPane.tsx index 6745808ab6..722a2beb37 100644 --- a/react/features/participants-pane/components/web/ParticipantsPane.tsx +++ b/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, diff --git a/react/features/settings/components/web/audio/AudioSettingsContent.tsx b/react/features/settings/components/web/audio/AudioSettingsContent.tsx index 73c94c3dcd..e29f260a0e 100644 --- a/react/features/settings/components/web/audio/AudioSettingsContent.tsx +++ b/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' }, diff --git a/react/features/settings/components/web/video/VideoSettingsContent.tsx b/react/features/settings/components/web/video/VideoSettingsContent.tsx index 810964f63d..c647f44665 100644 --- a/react/features/settings/components/web/video/VideoSettingsContent.tsx +++ b/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), diff --git a/react/features/toolbox/components/web/Drawer.tsx b/react/features/toolbox/components/web/Drawer.tsx index 42093f6a2d..d478d2741c 100644 --- a/react/features/toolbox/components/web/Drawer.tsx +++ b/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' }, diff --git a/react/features/toolbox/components/web/OverflowMenuButton.tsx b/react/features/toolbox/components/web/OverflowMenuButton.tsx index 415ae195e9..f6d1874d61 100644 --- a/react/features/toolbox/components/web/OverflowMenuButton.tsx +++ b/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: { diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx index f6edeec738..491eff8829 100644 --- a/react/features/toolbox/components/web/Toolbox.tsx +++ b/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' }, diff --git a/react/features/toolbox/constants.ts b/react/features/toolbox/constants.ts index 3da9fff2b5..ba699c5c7a 100644 --- a/react/features/toolbox/constants.ts +++ b/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',