From 30d307af3e10acb51f9707c7abfb1793bffea703 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 4 Oct 2023 14:12:01 +0100 Subject: [PATCH 1/4] Update Layout.tsx --- code/ui/manager/src/components/layout/Layout.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 03b94a616863..b4815f11b67c 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -171,9 +171,22 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: const LayoutContainer = styled.div( ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition }) => { + // To support older browsers we need to set the layout height using JS + // In the future we can use the CSS `height: 100dvh` instead + const setHeight = () => { + const currentHeight = window.innerHeight; + document.documentElement.style.setProperty('--vh', `${currentHeight}px`); + }; + + useEffect(() => { + setHeight(); + window.addEventListener('resize', setHeight); + return () => window.removeEventListener('resize', setHeight); + }, []); + return { width: '100%', - height: '100svh', // We are using svh to use the minimum space on mobile + height: 'var(--vh)', overflow: 'hidden', display: 'flex', flexDirection: 'column', From d7af9df5c8f3b7e12b4546a8ac2db89cff1690ee Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 4 Oct 2023 14:26:24 +0100 Subject: [PATCH 2/4] Add a default value before render --- code/ui/manager/src/components/layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index b4815f11b67c..4b821115f4b7 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -186,7 +186,7 @@ const LayoutContainer = styled.div( return { width: '100%', - height: 'var(--vh)', + height: 'var(--vh, 100vh)', overflow: 'hidden', display: 'flex', flexDirection: 'column', From 7938688ddfdce6413a84cb391626ef665540b9fe Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 6 Oct 2023 16:42:55 +0100 Subject: [PATCH 3/4] Use array instead with a fallback --- code/ui/manager/src/components/layout/Layout.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 4b821115f4b7..8153575924dc 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -171,22 +171,9 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: const LayoutContainer = styled.div( ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition }) => { - // To support older browsers we need to set the layout height using JS - // In the future we can use the CSS `height: 100dvh` instead - const setHeight = () => { - const currentHeight = window.innerHeight; - document.documentElement.style.setProperty('--vh', `${currentHeight}px`); - }; - - useEffect(() => { - setHeight(); - window.addEventListener('resize', setHeight); - return () => window.removeEventListener('resize', setHeight); - }, []); - return { width: '100%', - height: 'var(--vh, 100vh)', + height: ['100vh', '100dvh'], overflow: 'hidden', display: 'flex', flexDirection: 'column', From 1682f3245520008f7b891b6b5832b3f136fea8b8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 10:18:39 +0100 Subject: [PATCH 4/4] Update Layout.tsx --- code/ui/manager/src/components/layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 8153575924dc..01120b8847f8 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -173,7 +173,7 @@ const LayoutContainer = styled.div( ({ navSize, rightPanelWidth, bottomPanelHeight, viewMode, panelPosition }) => { return { width: '100%', - height: ['100vh', '100dvh'], + height: ['100vh', '100dvh'], // This array is a special Emotion syntax to set a fallback if 100dvh is not supported overflow: 'hidden', display: 'flex', flexDirection: 'column',