From 2b550399bec830265cc42d013d278ae6e6405453 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Thu, 28 Nov 2024 13:32:58 +0000
Subject: [PATCH] fix: Clone styling for Questions with data variables or tags

---
 .../components/Flow/components/Question.tsx   | 39 ++++++++++---------
 .../src/pages/FlowEditor/floweditor.scss      |  3 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
index f385aa5072..437c5b33c4 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Question.tsx
@@ -1,4 +1,5 @@
 import ErrorIcon from "@mui/icons-material/Error";
+import Box from "@mui/material/Box";
 import {
   ComponentType as TYPES,
   NodeTags,
@@ -76,25 +77,27 @@ const Question: React.FC<Props> = React.memo((props) => {
           },
         )}
       >
-        <Link
-          href={href}
-          prefetch={false}
-          onContextMenu={handleContext}
-          ref={drag}
-        >
-          {props.data?.img && (
-            <Thumbnail
-              imageSource={props.data?.img}
-              imageAltText={props.data?.text}
-            />
+        <Box>
+          <Link
+            href={href}
+            prefetch={false}
+            onContextMenu={handleContext}
+            ref={drag}
+          >
+            {props.data?.img && (
+              <Thumbnail
+                imageSource={props.data?.img}
+                imageAltText={props.data?.text}
+              />
+            )}
+            {Icon && <Icon titleAccess={iconTitleAccess} />}
+            <span>{props.text}</span>
+          </Link>
+          {props.type !== TYPES.SetValue && props.data?.fn && (
+            <DataField value={props.data.fn} variant="parent" />
           )}
-          {Icon && <Icon titleAccess={iconTitleAccess} />}
-          <span>{props.text}</span>
-        </Link>
-        {props.type !== TYPES.SetValue && props.data?.fn && (
-          <DataField value={props.data.fn} variant="parent" />
-        )}
-        {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+          {props.tags?.map((tag) => <Tag tag={tag} key={tag} />)}
+        </Box>
         <ol className="options">
           {childNodes.map((child: any) => (
             <Node key={child.id} {...child} />
diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
index 510847f098..568dde79a5 100644
--- a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
+++ b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -119,8 +119,7 @@ $fontMonospace: "Source Code Pro", monospace;
     outline-offset: 0;
   }
 
-  &.isClone > div,
-  &.isClone > a {
+  &.isClone > div {
     margin-top: 3px;
     position: relative;
     ::before {