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 0d693a7bd..306b78a54 100644 --- a/packages/widget/src/hooks/useHeaderHeight.ts +++ b/packages/widget/src/hooks/useHeaderHeight.ts @@ -1,16 +1,23 @@ +import { useHasExternalWalletProvider } from '../providers/WalletProvider/useHasExternalWalletProvider.js'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; 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(); const headerHeight = subvariant === 'split' ? maxHeaderHeightSubvariantSplit - : hiddenUI?.includes('walletMenu') + : hiddenUI?.includes('walletMenu') || hasExternalProvider ? minHeaderHeight : maxHeaderHeight;