From eeb0eebe5e430f22b5f9a45f2d1c04b2c5582a5d Mon Sep 17 00:00:00 2001
From: Sarah Breen <sarah.breen@opentrons.com>
Date: Mon, 9 Sep 2024 11:19:59 -0400
Subject: [PATCH] fix(app): Fix scrolling behind long press modals (#16206)

fix RQA-3139
---
 app/src/atoms/MenuList/index.tsx | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/src/atoms/MenuList/index.tsx b/app/src/atoms/MenuList/index.tsx
index 1994e6b24d9..25571e87e01 100644
--- a/app/src/atoms/MenuList/index.tsx
+++ b/app/src/atoms/MenuList/index.tsx
@@ -8,6 +8,8 @@ import {
   BORDERS,
   JUSTIFY_CENTER,
 } from '@opentrons/components'
+import { createPortal } from 'react-dom'
+import { getTopPortalEl } from '../../App/portal'
 import { LegacyModalShell } from '../../molecules/LegacyModal'
 
 interface MenuListProps {
@@ -19,19 +21,22 @@ interface MenuListProps {
 export const MenuList = (props: MenuListProps): JSX.Element | null => {
   const { children, isOnDevice = false, onClick = null } = props
   return isOnDevice && onClick != null ? (
-    <LegacyModalShell
-      borderRadius={BORDERS.borderRadius16}
-      width="max-content"
-      onOutsideClick={onClick}
-    >
-      <Flex
-        boxShadow={BORDERS.shadowSmall}
-        flexDirection={DIRECTION_COLUMN}
-        justifyContent={JUSTIFY_CENTER}
+    createPortal(
+      <LegacyModalShell
+        borderRadius={BORDERS.borderRadius16}
+        width="max-content"
+        onOutsideClick={onClick}
       >
-        {children}
-      </Flex>
-    </LegacyModalShell>
+        <Flex
+          boxShadow={BORDERS.shadowSmall}
+          flexDirection={DIRECTION_COLUMN}
+          justifyContent={JUSTIFY_CENTER}
+        >
+          {children}
+        </Flex>
+      </LegacyModalShell>,
+      getTopPortalEl()
+    )
   ) : (
     <Flex
       borderRadius="4px 4px 0px 0px"