fix(core): menu not scrollable when opening in modal (#8179)

fix AF-1360

When menu (with modal = false) is rendered in Modal, the [RemoveScroll utility wrapped by Modal](660060a765/packages/react/dialog/src/Dialog.tsx (L203)) will prevent menu from scrolling.

The reason why menu is scrollable within a dialog is because it is also wrapped a RemoveScroll [when modal is on. ](660060a765/packages/react/menu/src/Menu.tsx (L305))

In this fix, added a `useWithinModal` utility hook so that menu will automatically assign noportal mode for menu when it is rendered inside of a modal.

packages/frontend/component/src/ui/menu/desktop/root.tsx

@@ -1,5 +1,6 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
+import React from 'react';
 
 import type { MenuProps } from '../menu.types';
 import * as styles from '../styles.css';
@@ -9,6 +10,7 @@ import * as desktopStyles from './styles.css';
 export const DesktopMenu = ({
   children,
   items,
+  noPortal,
   portalOptions,
   rootOptions: {
     onOpenChange,
@@ -33,6 +35,7 @@ export const DesktopMenu = ({
       side,
       sideOffset: (sideOffset ?? 0) + 5,
     });
+  const ContentWrapper = noPortal ? React.Fragment : DropdownMenu.Portal;
   return (
     <DropdownMenu.Root
       onOpenChange={handleOpenChange}
@@ -51,7 +54,7 @@ export const DesktopMenu = ({
         {children}
       </DropdownMenu.Trigger>
 
-      <DropdownMenu.Portal {...portalOptions}>
+      <ContentWrapper {...portalOptions}>
         <DropdownMenu.Content
           className={clsx(
             styles.menuContent,
@@ -68,7 +71,7 @@ export const DesktopMenu = ({
         >
           {items}
         </DropdownMenu.Content>
-      </DropdownMenu.Portal>
+      </ContentWrapper>
     </DropdownMenu.Root>
   );
 };