feat: introduce style and behavior improvements

packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import FlowStep from 'components/FlowStep';
 import { StepPropType } from 'propTypes/propTypes';
 
+import { NodeWrapper, NodeInnerWrapper } from './style.js';
+
 function FlowStepNode({
   data: {
     step,
@@ -19,35 +21,37 @@ function FlowStepNode({
   },
 }) {
   return (
-    <Box
-      maxWidth={900}
-      width="100vw"
+    <NodeWrapper
       className="nodrag"
-      sx={{ visibility: layouted ? 'visible' : 'hidden' }}
+      sx={{
+        visibility: layouted ? 'visible' : 'hidden',
+      }}
     >
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-      <FlowStep
-        step={step}
-        index={index + 1}
-        collapsed={collapsed}
-        onOpen={onOpen}
-        onClose={onClose}
-        onChange={onChange}
-        flowId={flowId}
-        onContinue={openNextStep}
-      />
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        isConnectable={false}
-        style={{ visibility: 'hidden' }}
-      />
-    </Box>
+      <NodeInnerWrapper>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+        <FlowStep
+          step={step}
+          index={index + 1}
+          collapsed={collapsed}
+          onOpen={onOpen}
+          onClose={onClose}
+          onChange={onChange}
+          flowId={flowId}
+          onContinue={openNextStep}
+        />
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          isConnectable={false}
+          style={{ visibility: 'hidden' }}
+        />
+      </NodeInnerWrapper>
+    </NodeWrapper>
   );
 }
 

packages/web/src/components/EditorNew/FlowStepNode/style.js

@@ -0,0 +1,14 @@
+import { styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const NodeWrapper = styled(Box)(({ theme }) => ({
+  width: '100vw',
+  display: 'flex',
+  justifyContent: 'center',
+  padding: theme.spacing(0, 2.5),
+}));
+
+export const NodeInnerWrapper = styled(Box)(({ theme }) => ({
+  maxWidth: 900,
+  flex: 1,
+}));