fix: header not sticky sometimes

lifinance · Jun 1, 2022 · f045008 · f045008
1 parent a8f9c35
commit f045008
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -1,4 +1,4 @@
-import { Box, ScopedCssBaseline } from '@mui/material';
+import { Box, Container, ScopedCssBaseline } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { PropsWithChildren, RefObject, useLayoutEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -34,15 +34,25 @@ const ScrollableContainer = styled(Box)({
   display: 'flex',
 });
 
+const FlexContainer = styled(Container)({
+  display: 'flex',
+  flexBasis: 'auto',
+  flexDirection: 'column',
+  flexShrink: 0,
+  flexGrow: 1,
+});
+
 export const AppContainer: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const ref = useRef<HTMLElement>(null);
   const { containerStyle } = useWidgetConfig();
   return (
     <RelativeContainer sx={containerStyle}>
       <ScrollableContainer id={ElementId.ScrollableContainer} ref={ref}>
         <CssBaselineContainer enableColorScheme>
-          {children}
-          <PoweredBy />
+          <FlexContainer disableGutters>
+            {children}
+            <PoweredBy />
+          </FlexContainer>
         </CssBaselineContainer>
       </ScrollableContainer>
       <ScrollToLocation elementRef={ref} />