chore: adjust step widths, change cursor (#1216)

## TL;DR
CSS improvements:
* Use `grab` and `grabbing` cursor for the DragHandle
* Keep step widths the same as others when drag handle is shown

Fix:
* Make "Only continue if" deletable

## Screenshots
* Condition Step width matches child step with in If-then branches
![Screenshot 2025-09-18 at 12.36.39 PM.png](https://app.graphite.dev/user-attachments/assets/c3620535-adbc-4813-a52e-8921690d7490.png)

* If-then width matches for-each step widths
![Screenshot 2025-09-18 at 12.36.56 PM.png](https://app.graphite.dev/user-attachments/assets/89150639-61bd-4f34-b1b8-58e0bbcd5fcf.png)

![Screenshot 2025-09-18 at 12.37.16 PM.png](https://app.graphite.dev/user-attachments/assets/4c5345d4-a312-4c66-8e63-fed3180402b0.png)

Author: kevinkim-ogp

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

@@ -1,24 +1,28 @@
 import { Flex } from '@chakra-ui/react'
 import { useIsMobile } from '@opengovsg/design-system-react'
 
-import { MIN_FLOW_STEP_WIDTH } from '@/components/Editor/constants'
+import { NESTED_DRAG_HANDLE_WIDTH } from '../SortableList/components/SortableItem'
 
 interface FlowStepWrapperProps {
   children: React.ReactNode
-  isNested?: boolean
+  canChildStepsReorder?: boolean
+  allowReorder?: boolean
 }
 
 export default function FlowStepWrapper(props: FlowStepWrapperProps) {
-  const { children, isNested } = props
+  const { children, canChildStepsReorder, allowReorder } = props
   const isMobile = useIsMobile()
 
   return (
     <Flex
       alignItems="center"
       display={isMobile ? 'block' : 'flex'}
       flexDir="column"
-      w="100%"
-      minW={isNested ? '100%' : MIN_FLOW_STEP_WIDTH}
+      w={
+        canChildStepsReorder && !allowReorder && !isMobile
+          ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
+          : '100%'
+      }
     >
       {children}
     </Flex>

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

@@ -35,12 +35,20 @@ type FlowStepProps = {
   isLastStep: boolean
   isNested?: boolean
   allowReorder?: boolean
+  // we use this to control the width of condition steps in if-then and for-each
+  canChildStepsReorder?: boolean
 }
 
 export default function FlowStep(
   props: FlowStepProps,
 ): React.ReactElement | null {
-  const { step, isLastStep, isNested, allowReorder = true } = props
+  const {
+    step,
+    isLastStep,
+    isNested,
+    allowReorder = true,
+    canChildStepsReorder = false,
+  } = props
 
   const {
     isOpen: isModalOpen,
@@ -67,11 +75,11 @@ export default function FlowStep(
     app,
     caption,
     isCompleted,
-    isIfThenStep,
     isTrigger,
     selectedActionOrTrigger,
     substeps,
-  } = useStepMetadata(allApps, step)
+    shouldShowDragHandle,
+  } = useStepMetadata(allApps, step, readOnly, allowReorder, isMobile)
 
   const {
     cancelRef,
@@ -140,19 +148,6 @@ export default function FlowStep(
     }
   }
 
-  /**
-   * NOTE: there are various conditions that determine whether the drag handle
-   * should be shown.
-   *
-   * - not read only
-   * - not in mobile view
-   * - step is not a trigger
-   * - step is not an if-then condition step
-   * - allowReorder is true
-   */
-  const shouldShowDragHandle =
-    !readOnly && !isTrigger && !isMobile && !isIfThenStep && allowReorder
-
   const headerWidth = getFlowStepHeaderWidth(isDrawerOpen, isMobile, isNested)
 
   // generate help message only if template config exists
@@ -178,7 +173,10 @@ export default function FlowStep(
   }
 
   return (
-    <FlowStepWrapper isNested={isNested}>
+    <FlowStepWrapper
+      canChildStepsReorder={canChildStepsReorder}
+      allowReorder={allowReorder}
+    >
       {!app ? (
         <EmptyFlowStepHeader
           isNested={isNested}
@@ -191,9 +189,7 @@ export default function FlowStep(
       ) : (
         <Flex flexDir="row" w="100%">
           <Flex
-            alignItems={
-              isNested && !shouldShowDragHandle ? 'flex-start' : 'center'
-            }
+            alignItems={isNested ? 'flex-start' : 'center'}
             justifyContent="center"
             flexDir="column"
             flex="1"

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

@@ -72,6 +72,7 @@ export default function ForEach(props: ForEachProps) {
           isLastStep={false}
           allowReorder={false}
           showEmptyAction={hasNoActionSteps}
+          canChildStepsReorder={actionSteps.length > 1}
         />
         <SortableList
           items={actionSteps.map((step, index) => ({
@@ -92,7 +93,7 @@ export default function ForEach(props: ForEachProps) {
                     canAddStep={true}
                     isLastStep={isLastStep}
                     isOverlay={isOverlay}
-                    allowReorder={true}
+                    allowReorder={actionSteps.length > 1}
                   />
                 </Flex>
               </SortableList.Item>

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

@@ -203,6 +203,8 @@ export default function Branch(props: BranchProps) {
           step={conditionStep}
           canAddStep={canAddStep}
           isLastStep={false}
+          allowReorder={false}
+          canChildStepsReorder={actionSteps.length > 1}
         />
         <SortableList
           items={actionSteps.map((step, index) => ({

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

@@ -1,10 +1,15 @@
-import { useState } from 'react'
+import { IStep } from '@plumber/types'
+
+import { useContext, useState } from 'react'
 import { BiPlus } from 'react-icons/bi'
 import { Divider, Flex, IconButton, useDisclosure } from '@chakra-ui/react'
 
 import UnsavedChangesAlert from '@/components/Editor/UnsavedChangesAlert'
 import EmptyFlowStepHeader from '@/components/EmptyFlowStepHeader'
 import FlowStepConfigurationModal from '@/components/FlowStepConfigurationModal'
+import { NESTED_DRAG_HANDLE_WIDTH } from '@/components/SortableList/components/SortableItem'
+import { EditorContext } from '@/contexts/Editor'
+import { useStepMetadata } from '@/hooks/useStepMetadata'
 import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'
 
 import { hoverAddStepButtonStyles as styles } from './styles'
@@ -15,15 +20,35 @@ interface HoverAddStepButtonProps {
   isLastStep: boolean
   prevStepId: string
   showEmptyAction?: boolean
+  step: IStep
+  allowReorder?: boolean
+  canChildStepsReorder?: boolean
 }
 
 export function HoverAddStepButton(
   props: HoverAddStepButtonProps,
 ): JSX.Element {
-  const { isDisabled, isLastStep, prevStepId, showEmptyAction } = props
+  const {
+    isDisabled,
+    isLastStep,
+    prevStepId,
+    showEmptyAction,
+    step,
+    allowReorder,
+    canChildStepsReorder,
+  } = props
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [isHovered, setIsHovered] = useState(false)
 
+  const { allApps, readOnly, isMobile } = useContext(EditorContext)
+  const { shouldShowDragHandle } = useStepMetadata(
+    allApps,
+    step,
+    readOnly,
+    allowReorder,
+    isMobile,
+  )
+
   const {
     cancelRef,
     isWarningOpen,
@@ -55,6 +80,11 @@ export function HoverAddStepButton(
           pointerEvents={isDisabled ? 'none' : 'auto'}
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
+          w={
+            (shouldShowDragHandle || canChildStepsReorder) && !isMobile
+              ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
+              : 'full'
+          }
         >
           {/* vertical line */}
           {!isLastStep && (

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

@@ -62,5 +62,6 @@ export const hoverAddStepButtonStyles = {
     variant: 'clear',
     size: 'xs',
     borderRadius: 'lg',
+    left: 0,
   },
 }

packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx

@@ -4,7 +4,7 @@ import { useContext } from 'react'
 
 import { EditorContext } from '@/contexts/Editor'
 import { FlowStep } from '@/exports/components'
-import { TOOLBOX_ACTIONS, TOOLBOX_APP_KEY } from '@/helpers/toolbox'
+import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 
 import { HoverAddStepButton } from '../Content/IfThen/HoverAddStepButton'
 
@@ -15,6 +15,7 @@ interface GroupStepWithAddButtonProps {
   isOverlay?: boolean
   allowReorder?: boolean
   showEmptyAction?: boolean
+  canChildStepsReorder?: boolean
 }
 
 export default function GroupStepWithAddButton(
@@ -27,14 +28,13 @@ export default function GroupStepWithAddButton(
     isOverlay,
     allowReorder,
     showEmptyAction,
+    canChildStepsReorder,
   } = props
   const { isDrawerOpen, readOnly } = useContext(EditorContext)
 
   // cannot delete the condition step
   const isDeletable =
-    step.appKey !== TOOLBOX_APP_KEY &&
-    step.key !== TOOLBOX_ACTIONS.IfThen &&
-    step.key !== TOOLBOX_ACTIONS.ForEach
+    step.key !== TOOLBOX_ACTIONS.IfThen && step.key !== TOOLBOX_ACTIONS.ForEach
 
   return (
     <>
@@ -45,6 +45,7 @@ export default function GroupStepWithAddButton(
         isNested={true}
         isLastStep={isLastStep}
         allowReorder={allowReorder}
+        canChildStepsReorder={canChildStepsReorder}
       />
       {!isOverlay && (
         <HoverAddStepButton
@@ -53,6 +54,9 @@ export default function GroupStepWithAddButton(
           isLastStep={isLastStep}
           prevStepId={step.id}
           showEmptyAction={showEmptyAction}
+          step={step}
+          allowReorder={allowReorder}
+          canChildStepsReorder={canChildStepsReorder}
         />
       )}
     </>

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

@@ -5,6 +5,7 @@ import { BiTrash } from 'react-icons/bi'
 import { Box, Flex, Icon, Text } from '@chakra-ui/react'
 import { IconButton } from '@opengovsg/design-system-react'
 
+import { NESTED_DRAG_HANDLE_WIDTH } from '@/components/SortableList/components/SortableItem'
 import { EditorContext } from '@/contexts/Editor'
 import { getFlowStepHeaderWidth, getToolboxIcon } from '@/helpers/editor'
 import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
@@ -62,9 +63,20 @@ export default function FlowStepGroup(props: FlowStepGroupProps) {
     onDrawerClose()
   }, [deleteForEach, onDrawerClose])
 
+  // NOTE: we check if its inside the for-each
+  // so that if-then steps follow the same width of the nested actions
+  // when the drag handle is shown
+  const isInsideForEach = stepsBeforeGroup.some(
+    (step) => step.key === TOOLBOX_ACTIONS.ForEach,
+  )
+
   return (
     <Flex
-      w="100%"
+      w={
+        isInsideForEach && stepsBeforeGroup.length > 2
+          ? `calc(100% - ${NESTED_DRAG_HANDLE_WIDTH}px)`
+          : '100%'
+      }
       alignItems="center"
       justifyContent={isDrawerOpen ? 'flex-start' : 'center'}
     >

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

@@ -4,3 +4,9 @@
   padding: 0;
   list-style: none;
 }
+
+/* Force cursor during active drag */
+body.is-dragging,
+body.is-dragging * {
+  cursor: grabbing !important;
+}

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

@@ -19,7 +19,7 @@
   justify-content: center;
   flex: 0 0 auto;
   touch-action: none;
-  cursor: var(--cursor, pointer);
+  cursor: var(--cursor, grab);
   border-radius: 5px;
   border: none;
   outline: none;