From 30fc2d120938e9d215791c18a15914426ebf34e4 Mon Sep 17 00:00:00 2001
From: CJ <72030708+cj12312021@users.noreply.github.com>
Date: Mon, 30 Sep 2024 00:12:22 -0500
Subject: [PATCH] fix link menu issues (#5310)

---
 .../components/Shared/ExternalLinksButton.tsx | 33 ++++++++-----------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
index 00b318c65..7ecea9b30 100644
--- a/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
+++ b/ui/v2.5/src/components/Shared/ExternalLinksButton.tsx
@@ -5,6 +5,7 @@ import { Icon } from "./Icon";
 import { IconDefinition, faLink } from "@fortawesome/free-solid-svg-icons";
 import { useMemo } from "react";
 import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
+import ReactDOM from "react-dom";
 
 export const ExternalLinksButton: React.FC<{
   icon?: IconDefinition;
@@ -15,25 +16,8 @@ export const ExternalLinksButton: React.FC<{
     return null;
   }
 
-  if (urls.length === 1) {
-    return (
-      <Button
-        as={ExternalLink}
-        href={TextUtils.sanitiseURL(urls[0])}
-        className={`minimal link external-links-button ${className}`}
-        title={urls[0]}
-      >
-        <Icon icon={icon} />
-      </Button>
-    );
-  }
-
-  return (
-    <Dropdown className="external-links-button">
-      <Dropdown.Toggle as={Button} className={`minimal link ${className}`}>
-        <Icon icon={icon} />
-      </Dropdown.Toggle>
-
+  const Menu = () =>
+    ReactDOM.createPortal(
       <Dropdown.Menu>
         {urls.map((url) => (
           <Dropdown.Item
@@ -45,7 +29,16 @@ export const ExternalLinksButton: React.FC<{
             {url}
           </Dropdown.Item>
         ))}
-      </Dropdown.Menu>
+      </Dropdown.Menu>,
+      document.body
+    );
+
+  return (
+    <Dropdown className="external-links-button">
+      <Dropdown.Toggle as={Button} className={`minimal link ${className}`}>
+        <Icon icon={icon} />
+      </Dropdown.Toggle>
+      <Menu />
     </Dropdown>
   );
 };