From 7094c527aa1a51a72ff07b256c64f131a922ddf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 25 Nov 2024 09:15:09 +0000
Subject: [PATCH] fix: External Portal node graph styling (#4004)

---
 .../components/Flow/components/Portal.tsx     | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
index aee50252dd..02a92074fa 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Portal.tsx
@@ -89,17 +89,17 @@ const ExternalPortal: React.FC<any> = (props) => {
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
-      <Box sx={{ width: "max-content" }}>
-        <li className={classNames("card", "portal", { isDragging })}>
+      <li ref={ref}>
+        <Box className={classNames("card", "portal", { isDragging })}>
           <Link href={`/${href}`} prefetch={false} ref={drag}>
             <span>{href}</span>
           </Link>
           <Link href={editHref} prefetch={false} className="portalMenu">
             <MoreVert titleAccess="Edit Portal" />
           </Link>
-        </li>
+        </Box>
         {props.tags?.map((tag: NodeTag) => <Tag tag={tag} key={tag} />)}
-      </Box>
+      </li>
     </>
   );
 };
@@ -141,19 +141,22 @@ const InternalPortal: React.FC<any> = (props) => {
   return (
     <>
       <Hanger hidden={isDragging} before={props.id} parent={parent} />
-      <li className={classNames("card", "portal", { isDragging })}>
-        <Link
-          href={href}
-          prefetch={false}
-          ref={drag}
-          onContextMenu={handleContext}
-        >
-          {Icon && <Icon />}
-          <span>{props.data.text}</span>
-        </Link>
-        <Link href={editHref} prefetch={false} className="portalMenu">
-          <MoreVert titleAccess="Edit Portal" />
-        </Link>
+      <li ref={ref}>
+        <Box className={classNames("card", "portal", { isDragging })}>
+          <Link
+            href={href}
+            prefetch={false}
+            ref={drag}
+            onContextMenu={handleContext}
+          >
+            {Icon && <Icon />}
+            <span>{props.data.text}</span>
+          </Link>
+          <Link href={editHref} prefetch={false} className="portalMenu">
+            <MoreVert titleAccess="Edit Portal" />
+          </Link>
+        </Box>
+        {props.tags?.map((tag: NodeTag) => <Tag tag={tag} key={tag} />)}
       </li>
     </>
   );