[DUPLICATE-STEP-7] PLU-564: improve ui for reorder step (#1103)

### TL;DR
Improved the UI for flow steps and drag handles.
Improved display of flow step name and buttons.

### What changed?

- Fixed flex layout in `StepCaptionAndDemo` by replacing `maxW="70%"` with `flex={1} minW={0}` to prevent overflow issues
- Aligned nested flow steps to have the same width and display drag handle on the right
- Updated the drag handle component to have different padding based on whether it's in a nested context
- Modified the `getFlowStepHeaderWidth` function to account for drag handle presence
- Reduced padding in the IfThen component from `px={4}` to `px={2}` and in branch styles from `px={4}` to `px={3}`

### How to test?
- [ ] Drag and reorder still works
- [ ] Flow step duplicate step and delete button still appear on hover in different screen sizes and are not squished by step name

### Screenshots

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/Wrwhm8Mmhv1Z2GwlSb7V/d5841419-1a7b-4870-875c-abef6fa2439a.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/Wrwhm8Mmhv1Z2GwlSb7V/24041ad9-e7dd-445c-b0e7-b7e7aace3f83.png)

Author: kevinkim-ogp

packages/frontend/src/components/FlowStep/components/StepCaptionAndDemo.tsx

@@ -11,7 +11,7 @@ export default function StepCaptionAndDemo(props: StepCaptionProps) {
   const { caption } = props
   return (
     <>
-      <Flex direction="column" align="start" maxW="70%" flexShrink={1}>
+      <Flex direction="column" align="start" flex={1} flexShrink={1} minW={0}>
         <Flex alignItems="center" gap={2} maxW="100%">
           <Text
             textStyle="subhead-1"
@@ -66,7 +66,7 @@ export default function StepCaptionAndDemo(props: StepCaptionProps) {
 
 //   return (
 //     <>
-//       <Flex direction="column" align="start" maxW="80%" flexShrink={1}>
+//       <Flex direction="column" align="start" flex={1} flexShrink={1} minW={0}>
 //         <Flex alignItems="center" gap={2} maxW="100%">
 //           <Text
 //             textStyle="subhead-1"

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

@@ -19,7 +19,7 @@ import EmptyFlowStepHeader from '../EmptyFlowStepHeader'
 import ErrorFlowStepHeader from '../ErrorFlowStepHeader'
 import FlowStepConfigurationModal from '../FlowStepConfigurationModal'
 import { infoboxMdComponents } from '../MarkdownRenderer/CustomMarkdownComponents'
-import { SortableList } from '../SortableList'
+import { DragHandle } from '../SortableList/components'
 
 import DeleteStepButton from './components/DeleteStepButton'
 import DuplicateStepButton from './components/DuplicateStepButton'
@@ -140,7 +140,6 @@ export default function FlowStep(
     }
   }
 
-  const headerWidth = getFlowStepHeaderWidth(isDrawerOpen, isMobile, isNested)
   /**
    * NOTE: there are various conditions that determine whether the drag handle
    * should be shown.
@@ -154,6 +153,13 @@ export default function FlowStep(
   const shouldShowDragHandle =
     !readOnly && !isTrigger && !isMobile && !isIfThenStep && allowReorder
 
+  const headerWidth = getFlowStepHeaderWidth(
+    isDrawerOpen,
+    isMobile,
+    isNested,
+    shouldShowDragHandle,
+  )
+
   // generate help message only if template config exists
   const stepAppEventKey = `${step?.appKey}_${step?.key}`
   const templateStepAppEventKey = step.config.templateConfig?.appEventKey
@@ -190,7 +196,9 @@ export default function FlowStep(
       ) : (
         <Flex flexDir="row" w="100%">
           <Flex
-            alignItems="center"
+            alignItems={
+              isNested && !shouldShowDragHandle ? 'flex-start' : 'center'
+            }
             justifyContent="center"
             flexDir="column"
             flex="1"
@@ -266,10 +274,10 @@ export default function FlowStep(
           </Flex>
           {shouldShowDragHandle &&
             (isNested ? (
-              <SortableList.DragHandle onWarningOpen={onWarningOpen} />
+              <DragHandle isNested={isNested} onWarningOpen={onWarningOpen} />
             ) : (
               <Box position="absolute" left="100%" alignSelf="center">
-                <SortableList.DragHandle onWarningOpen={onWarningOpen} />
+                <DragHandle onWarningOpen={onWarningOpen} />
               </Box>
             ))}
         </Flex>

packages/frontend/src/components/FlowStepGroup/Content/IfThen/index.tsx

@@ -99,7 +99,7 @@ export default function IfThen(props: IfThenProps): JSX.Element {
 
   return (
     <Flex flexDir="column" alignItems="center" gap={4} w="100%" mt={2}>
-      <Flex flexDir="column" w="100%" px={4} gap={4}>
+      <Flex flexDir="column" w="100%" px={2} gap={4}>
         {groupedSteps.map((branchSteps) => {
           return (
             <Branch

packages/frontend/src/components/FlowStepGroup/Content/IfThen/styles.ts

@@ -36,7 +36,7 @@ export const branchStyles = {
     borderRadius: 'lg',
     direction: 'column' as FlexProps['direction'],
     overflow: 'hidden',
-    px: 4,
+    px: 3,
     py: 3,
     w: '100%',
   },

packages/frontend/src/components/SortableList/components/SortableItem/SortableItem.css

@@ -15,7 +15,6 @@
 .DragHandle {
   display: flex;
   width: 12px;
-  padding: 15px;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;

packages/frontend/src/components/SortableList/components/SortableItem/index.tsx

@@ -1,7 +1,7 @@
 import './SortableItem.css'
 
 import type { CSSProperties, PropsWithChildren } from 'react'
-import React, { createContext, useContext, useMemo } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type {
   DraggableSyntheticListeners,
   UniqueIdentifier,
@@ -65,8 +65,11 @@ export function SortableItem({ children, id }: PropsWithChildren<Props>) {
   )
 }
 
-export function DragHandle(props: { onWarningOpen?: () => void }) {
-  const { onWarningOpen } = props
+export function DragHandle(props: {
+  isNested?: boolean
+  onWarningOpen?: () => void
+}) {
+  const { isNested, onWarningOpen } = props
   const { attributes, listeners, ref } = useContext(SortableItemContext)
   const { shouldWarnOnLeave } = useContext(EditorContext)
 
@@ -77,6 +80,7 @@ export function DragHandle(props: { onWarningOpen?: () => void }) {
       {...listeners}
       ref={ref}
       {...(shouldWarnOnLeave && { onPointerDown: onWarningOpen })}
+      style={{ padding: isNested ? '8px' : '12px' }}
     >
       <svg viewBox="0 0 20 20" width="12">
         <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>

packages/frontend/src/helpers/editor.ts

@@ -19,6 +19,7 @@ export const getFlowStepHeaderWidth = (
   isDrawerOpen: boolean,
   isMobile?: boolean,
   isNested?: boolean,
+  shouldShowDragHandle?: boolean,
 ) => {
   if (isDrawerOpen) {
     if (isMobile) {
@@ -31,7 +32,11 @@ export const getFlowStepHeaderWidth = (
     return '100%'
   }
 
-  return isNested ? 'full' : '600px'
+  return isNested
+    ? shouldShowDragHandle
+      ? 'full'
+      : 'calc(100% - 16px)' // 16px is the width of the drag handle
+    : '600px'
 }
 
 function isValidArgValue(value: IJSONValue): boolean {