From 958c6f5da134c17e9b0f4c1afd3e3712dff5d08a Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Tue, 17 Sep 2024 19:57:48 +0200 Subject: [PATCH 1/2] chore: factor exernal wallet provision into header hieght calculations --- packages/widget/src/hooks/useHeaderHeight.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/widget/src/hooks/useHeaderHeight.ts b/packages/widget/src/hooks/useHeaderHeight.ts index 0d693a7bd..565a2183d 100644 --- a/packages/widget/src/hooks/useHeaderHeight.ts +++ b/packages/widget/src/hooks/useHeaderHeight.ts @@ -1,3 +1,4 @@ +import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; export const minHeaderHeight = 64; @@ -6,11 +7,12 @@ export const maxHeaderHeightSubvariantSplit = 136; export const useHeaderHeight = () => { const { hiddenUI, subvariant } = useWidgetConfig(); + const { hasExternalProvider } = useHasExternalWalletProvider(); const headerHeight = subvariant === 'split' ? maxHeaderHeightSubvariantSplit - : hiddenUI?.includes('walletMenu') + : hiddenUI?.includes('walletMenu') || hasExternalProvider ? minHeaderHeight : maxHeaderHeight; From 99da2c7a74251af5735fbb38d87346f8b16953f1 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 18 Sep 2024 11:47:38 +0200 Subject: [PATCH 2/2] chore: add some documentation to the hook and delete dead code --- packages/widget/src/components/Header/Header.style.ts | 6 ------ packages/widget/src/hooks/useHeaderHeight.ts | 5 +++++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/widget/src/components/Header/Header.style.ts b/packages/widget/src/components/Header/Header.style.ts index f42b02ed4..3efc45908 100644 --- a/packages/widget/src/components/Header/Header.style.ts +++ b/packages/widget/src/components/Header/Header.style.ts @@ -43,12 +43,6 @@ export const Container = styled(Box, { }; }); -export const ContainerPlaceholder = styled(Box)(({ theme }) => { - return { - ...(theme.header?.position === 'fixed' ? {} : { display: 'none' }), - }; -}); - export const WalletButton = styled(Button, { shouldForwardProp: (prop) => prop !== 'subvariant', })<{ subvariant?: WidgetSubvariant }>(({ subvariant, theme }) => ({ diff --git a/packages/widget/src/hooks/useHeaderHeight.ts b/packages/widget/src/hooks/useHeaderHeight.ts index 565a2183d..306b78a54 100644 --- a/packages/widget/src/hooks/useHeaderHeight.ts +++ b/packages/widget/src/hooks/useHeaderHeight.ts @@ -5,6 +5,11 @@ export const minHeaderHeight = 64; export const maxHeaderHeight = 108; export const maxHeaderHeightSubvariantSplit = 136; +// We use fixed position on the header when Widget is in Full Height layout. +// We do this to get it to work like the sticky header does in the other layout modes. +// As the header is position fixed its not in the document flow anymore. +// To prevent the remaining page content from appearing behind the header we need to +// pass the headers height so that the position of the page content can be adjusted export const useHeaderHeight = () => { const { hiddenUI, subvariant } = useWidgetConfig(); const { hasExternalProvider } = useHasExternalWalletProvider();