Add dropdownMenuContainer prop to CopyDropdown component

apps/app/src/client/components/Common/CopyDropdown/CopyDropdown.tsx

@@ -27,6 +27,7 @@ interface CopyDropdownProps {
   pagePath: string;
   pageId?: string;
   dropdownToggleClassName?: string;
+  dropdownMenuContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
   isShareLinkMode?: boolean;
 }
 
@@ -120,7 +121,10 @@ export const CopyDropdown: React.FC<CopyDropdownProps> = (props) => {
    */
   const { t } = useTranslation('commons');
   const {
-    dropdownToggleId, pageId, dropdownToggleClassName, children, isShareLinkMode,
+    dropdownToggleId, pageId,
+    dropdownToggleClassName,
+    dropdownMenuContainer,
+    children, isShareLinkMode,
   } = props;
 
   const customSwitchForParamsId = `customSwitchForParams_${dropdownToggleId}`;
@@ -143,7 +147,7 @@ export const CopyDropdown: React.FC<CopyDropdownProps> = (props) => {
         <DropdownMenu
           className={`${styles['copy-clipboard-dropdown-menu']}`}
           strategy="fixed"
-          container="body"
+          container={dropdownMenuContainer}
         >
           <div className="d-flex align-items-center justify-content-between">
             <DropdownItem header className="px-3">

apps/app/src/client/components/PageHeader/PageTitleHeader.tsx

@@ -166,6 +166,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
           pagePath={currentPage.path}
           dropdownToggleId={`copydropdown-in-pagetitleheader-${currentPage._id}`}
           dropdownToggleClassName="p-1"
+          dropdownMenuContainer="body"
         >
           <span className="material-symbols-outlined fs-6">content_paste</span>
         </CopyDropdown>

apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx

@@ -60,7 +60,13 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
               <span className="badge text-bg-secondary">WIP</span>
             )}
             <span className="grw-page-path-nav-copydropdown">
-              <CopyDropdown pageId={pageId} pagePath={pagePath} dropdownToggleId={copyDropdownId} dropdownToggleClassName="p-2">
+              <CopyDropdown
+                pageId={pageId}
+                pagePath={pagePath}
+                dropdownToggleId={copyDropdownId}
+                dropdownToggleClassName="p-2"
+                dropdownMenuContainer="body"
+              >
                 <span className="material-symbols-outlined">content_paste</span>
               </CopyDropdown>
             </span>