feat: make flow editor topbar sticky

packages/web/src/components/EditorLayout/index.jsx

@@ -17,6 +17,7 @@ import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
 import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import { GET_FLOW } from 'graphql/queries/get-flow';
 import * as URLS from 'config/urls';
+import { TopBar } from './style';
 
 export default function EditorLayout() {
   const { flowId } = useParams();
@@ -67,8 +68,7 @@ export default function EditorLayout() {
   );
   return (
     <>
-      <Stack direction="column" height="100%">
-        <Stack
+      <TopBar
         direction="row"
         bgcolor="white"
         justifyContent="space-between"
@@ -76,6 +76,7 @@ export default function EditorLayout() {
         boxShadow={1}
         py={1}
         px={1}
+        className="mui-fixed"
       >
         <Box display="flex" flex={1} alignItems="center">
           <Tooltip
@@ -119,8 +120,8 @@ export default function EditorLayout() {
               : formatMessage('flowEditor.publish')}
           </Button>
         </Box>
-        </Stack>
-
+      </TopBar>
+      <Stack direction="column" height="100%">
         <Container maxWidth="md">
           <EditorProvider value={{ readOnly: !!flow?.active }}>
             {!flow && !loading && 'not found'}

packages/web/src/components/EditorLayout/style.js

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+
+export const TopBar = styled(Stack)(({ theme }) => ({
+  zIndex: theme.zIndex.appBar,
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  right: 0,
+}));

packages/web/src/styles/theme.js

@@ -225,7 +225,7 @@ export const defaultTheme = createTheme({
           textDecoration: 'none',
         },
         '#root': {
-          height: '100vh',
+          minHeight: '100vh',
         },
       },
     },
@@ -297,6 +297,6 @@ export const mationTheme = createTheme(
         },
       },
     },
-  })
+  }),
 );
 export default defaultTheme;