Can now decide whether to aloow wordwrapping or not

src/Sass/general.scss

@@ -9,3 +9,29 @@
 .fit-content-width {
   width: fit-content;
 }
+
+.task-name-display-panel {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  width: 100%;
+  white-space: nowrap;
+}
+
+.task-name-display-panel__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.task-name-display-panel--wrap {
+  white-space: normal;
+
+  .task-name-display-panel__name {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}

src/modules/manager/workflowTemplates/components/TaskNameDisplayPanel.tsx

@@ -10,11 +10,13 @@ import ValidationErrorIcon from "../../../../components/validationErrorIcon";
 export interface TaskNameDisplayPanel {
   task: TaskDefinition;
   showValidationErrorIcon: boolean;
+  allowWordWrap?: boolean;
 }
 
 const TaskNameDisplayPanel: React.FC<TaskNameDisplayPanel> = ({
   task,
   showValidationErrorIcon = false,
+  allowWordWrap = false,
 }) => {
   const [tasksMetadata, setTasksMetadata] = React.useState<TaskMetadata[]>([]);
 
@@ -36,11 +38,16 @@ const TaskNameDisplayPanel: React.FC<TaskNameDisplayPanel> = ({
   }, [tasksMetadata]);
 
   const meta = taskMetadataByType.get(task.type);
+  const panelClassName = allowWordWrap
+    ? "task-name-display-panel task-name-display-panel--wrap"
+    : "task-name-display-panel";
 
   return (
-    <div>
+    <div className={panelClassName}>
       <FontAwesomeStringIcon icon={meta?.icon} />
+      <span className="task-name-display-panel__name">
         {task.config.name as string}
+      </span>
       {<ValidationErrorIcon visible={showValidationErrorIcon} />}
     </div>
   );

src/modules/manager/workflowTemplates/components/VisualisetTab.tsx

@@ -690,6 +690,7 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
                           showValidationErrorIcon={
                             taskValidation[guid] === false
                           }
+                          allowWordWrap={true}
                         />
                       </div>
                     </div>