fix: widget header with subvariant split (#298)

packages/widget/src/components/AppContainer.tsx

@@ -1,10 +1,7 @@
 import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
 import type { PropsWithChildren } from 'react';
-import {
-  maxHeaderHeight,
-  minHeaderHeight,
-} from '../components/Header/Header.js';
 import { defaultMaxHeight } from '../config/constants.js';
+import { useHeaderHeight } from '../hooks/useHeaderHeight.js';
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
 import type { WidgetVariant } from '../types/widget.js';
 import { ElementId, createElementId } from '../utils/elements.js';
@@ -103,14 +100,10 @@ export const FlexContainer = styled(Container)(({ theme }) => ({
 
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   // const ref = useRef<HTMLDivElement>(null);
-  const { variant, elementId, hiddenUI, theme } = useWidgetConfig();
-
+  const { variant, elementId, theme } = useWidgetConfig();
+  const { headerHeight } = useHeaderHeight();
   const positionFixedAdjustment =
-    theme?.header?.position === 'fixed'
-      ? hiddenUI?.includes('walletMenu')
-        ? minHeaderHeight
-        : maxHeaderHeight
-      : 0;
+    theme?.header?.position === 'fixed' ? headerHeight : 0;
 
   return (
     <RelativeContainer

packages/widget/src/components/Header/Header.tsx

@@ -1,24 +1,17 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { useHeaderHeight } from '../../hooks/useHeaderHeight.js';
 import { ElementId, createElementId } from '../../utils/elements.js';
 import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js';
 import { Container } from './Header.style.js';
 import { NavigationHeader } from './NavigationHeader.js';
 import { WalletHeader } from './WalletHeader.js';
 
-export const minHeaderHeight = 64;
-export const maxHeaderHeight = 108;
-
 export const HeaderContainer: FC<PropsWithChildren<{}>> = ({ children }) => {
   const { pathname } = useLocation();
   const elementId = useDefaultElementId();
-  const { hiddenUI } = useWidgetConfig();
-
-  const headerHeight = hiddenUI?.includes('walletMenu')
-    ? minHeaderHeight
-    : maxHeaderHeight;
+  const { headerHeight } = useHeaderHeight();
 
   return (
     <Container

packages/widget/src/hooks/useHeaderHeight.ts

@@ -0,0 +1,20 @@
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
+
+export const minHeaderHeight = 64;
+export const maxHeaderHeight = 108;
+export const maxHeaderHeightSubvariantSplit = 136;
+
+export const useHeaderHeight = () => {
+  const { hiddenUI, subvariant } = useWidgetConfig();
+
+  const headerHeight =
+    subvariant === 'split'
+      ? maxHeaderHeightSubvariantSplit
+      : hiddenUI?.includes('walletMenu')
+        ? minHeaderHeight
+        : maxHeaderHeight;
+
+  return {
+    headerHeight,
+  };
+};