[SIDE-DRAWER-27]: Improve side drawer sliding motion (#1009)

## TL;DR
This PR focuses on improving the sliding motion of the side drawer to make it more 'drawer' like.
Previous implementation had the right drawer elements opening from the centre of the right drawer, which made it look like there were a lot of layout changes.

**Additional changes**
* replace the side drawer left box shadow with a divider instead

## How to test
- [ ] Drawer opens / closes as intended
- [ ] Drawer motion is smooth when opening and closing

## Screenshots

[Screen Recording 2025-05-21 at 4.50.30 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/Wrwhm8Mmhv1Z2GwlSb7V/3a5f999e-1d40-4efd-8754-fb4715692a7b.mov" />](https://app.graphite.dev/media/video/Wrwhm8Mmhv1Z2GwlSb7V/3a5f999e-1d40-4efd-8754-fb4715692a7b.mov)

[Screen Recording 2025-05-21 at 4.50.50 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/Wrwhm8Mmhv1Z2GwlSb7V/a17e15e8-4f7a-400f-958f-de384362c2fc.mov" />](https://app.graphite.dev/media/video/Wrwhm8Mmhv1Z2GwlSb7V/a17e15e8-4f7a-400f-958f-de384362c2fc.mov)

**replace box shadow with border**
![Screenshot 2025-05-22 at 7.06.36 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/Wrwhm8Mmhv1Z2GwlSb7V/853ce64d-8377-4639-a690-0eeaea910251.png)

Author: kevinkim-ogp

packages/frontend/src/components/Editor/index.tsx

@@ -151,31 +151,29 @@ export default function Editor(props: EditorProps): React.ReactElement {
     )
   }
 
-  const getStepPadding = () => {
-    if (isDrawerOpen) {
-      if (isMobile) {
-        return 0
-      }
-      return '5rem'
-    }
-    return 0
-  }
+  const leftStepPadding = isDrawerOpen ? (isMobile ? 0 : '5rem') : 0
+  const rightDrawerTransform = isDrawerOpen
+    ? 'translateX(0)'
+    : 'translateX(100%)'
+  const rightDrawerWidth = isDrawerOpen
+    ? isMobile
+      ? '100vw'
+      : EDITOR_RIGHT_DRAWER_WIDTH
+    : '0'
 
   return (
     <Flex
-      w="full"
-      justifyContent="center"
-      overflowX="hidden"
+      {...editorStyles.editorWrapper}
       sx={{
         backgroundImage: 'radial-gradient(#f5f5f5 2px, transparent 2px)',
         backgroundSize: '30px 30px',
       }}
     >
       <StepExecutionsToIncludeProvider value={stepExecutionsToInclude}>
         <Flex
-          {...editorStyles.container}
+          {...editorStyles.stepHeaderContainer}
           flex={isDrawerOpen ? (isMobile ? 0 : 1) : undefined}
-          px={getStepPadding()}
+          px={leftStepPadding}
           maxWidth={`calc(100% - ${
             isDrawerOpen ? EDITOR_RIGHT_DRAWER_WIDTH : '0px'
           })`}
@@ -211,19 +209,18 @@ export default function Editor(props: EditorProps): React.ReactElement {
             />
           )}
         </Flex>
-
+        {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */}
+        <Flex
+          {...editorStyles.dummyRightContainer}
+          w={rightDrawerWidth}
+          transform={rightDrawerTransform}
+        />
         <Flex
           {...editorStyles.rightDrawerContainer}
-          w={
-            isDrawerOpen
-              ? isMobile
-                ? '100vw'
-                : EDITOR_RIGHT_DRAWER_WIDTH
-              : '0'
-          }
+          w={rightDrawerWidth}
           visibility={isDrawerOpen ? 'visible' : 'hidden'}
           opacity={isDrawerOpen ? 1 : 0}
-          transform={isDrawerOpen ? 'translateX(0)' : 'translateX(100%)'}
+          transform={rightDrawerTransform}
         >
           <EditorRightDrawer
             flowStepGroupIconUrl={flowStepGroupIconUrl}

packages/frontend/src/components/Editor/styles.ts

@@ -1,9 +1,15 @@
 import { FlexProps } from '@chakra-ui/react'
 
-import { EDITOR_MAX_HEIGHT } from './constants'
+import { EDITOR_MAX_HEIGHT, EDITOR_RIGHT_DRAWER_WIDTH } from './constants'
 
 export const editorStyles = {
-  container: {
+  editorWrapper: {
+    w: 'full',
+    overflowX: 'hidden' as FlexProps['overflowX'],
+    justifyContent: 'center',
+    pos: 'relative' as FlexProps['pos'],
+  },
+  stepHeaderContainer: {
     display: 'block',
     flexDir: 'column' as FlexProps['flexDir'],
     alignItems: 'center',
@@ -16,18 +22,27 @@ export const editorStyles = {
     transition: 'transform 0.4s cubic-bezier(0.3, 0, 0.2, 1)',
     w: '100%',
   },
+  dummyRightContainer: {
+    pos: 'relative' as FlexProps['pos'],
+    maxHeight: EDITOR_MAX_HEIGHT,
+    h: EDITOR_MAX_HEIGHT,
+    overflow: 'hidden' as FlexProps['overflow'],
+    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+    border: 'none',
+  },
   rightDrawerContainer: {
     flexDir: 'column' as FlexProps['flexDir'],
-    position: 'relative' as FlexProps['position'],
+    position: 'absolute' as FlexProps['position'],
     bg: 'white',
     borderRadius: 'none',
-    borderLeft: '1px',
-    borderColor: 'base.divider.medium',
-    boxShadow: 'lg',
+    borderLeftWidth: '1px',
+    borderLeftColor: 'base.divider.medium',
     opacity: 0,
+    right: 0,
+    minWidth: EDITOR_RIGHT_DRAWER_WIDTH,
     maxHeight: EDITOR_MAX_HEIGHT,
     h: EDITOR_MAX_HEIGHT,
     overflowY: 'auto' as FlexProps['overflowY'],
-    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+    transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
   },
 }