fix(protocol-designer): fix step overflow menu position (#17439)

* fix(protocol-designer): fix step overflow menu position

Author: koji

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx

@@ -294,6 +294,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
               confirmDelete={confirmDelete}
               confirmMultiDelete={confirmMultiDelete}
               multiSelectItemIds={multiSelectItemIds}
+              sidebarWidth={sidebarWidth}
             />,
             getMainPagePortalEl()
           )

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx

@@ -41,8 +41,11 @@ interface StepOverflowMenuProps {
   confirmDelete: () => void
   confirmMultiDelete: () => void
   multiSelectItemIds: string[] | null
+  sidebarWidth: number // adjust the position of the overflow menu
 }
 
+const POSITION_ADJUSTMENT = 4
+
 export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
   const {
     stepId,
@@ -53,6 +56,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
     confirmDelete,
     confirmMultiDelete,
     multiSelectItemIds,
+    sidebarWidth,
   } = props
   const { t } = useTranslation('protocol_steps')
   const singleEditFormHasUnsavedChanges = useSelector(
@@ -101,7 +105,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
         ref={menuRootRef}
         zIndex={12}
         top={top}
-        left="18.75rem"
+        left={sidebarWidth - POSITION_ADJUSTMENT} // the space between kebab menu button and overflow menu is 8px
         position={POSITION_ABSOLUTE}
         whiteSpace={NO_WRAP}
         borderRadius={BORDERS.borderRadius8}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx

@@ -67,6 +67,7 @@ describe('StepOverflowMenu', () => {
       handleEdit: vi.fn(),
       confirmDelete: mockConfirm,
       confirmMultiDelete: vi.fn(),
+      sidebarWidth: 235,
     }
     vi.mocked(getMultiSelectItemIds).mockReturnValue(null)
     vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false)