diff --git a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
index 84bace39..f07457e3 100644
--- a/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
+++ b/packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
@@ -12,11 +12,10 @@ import {
   EdgeCreationTypes,
   useHover,
   ScaleDetailsLevel,
-  RunStatus
-  // NodeLabel
+  RunStatus,
+  TaskGroupPillLabel
 } from '@patternfly/react-topology';
 import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';
-import TaskGroupPillLabel from '@patternfly/react-topology/dist/esm/pipelines/components/groups/TaskGroupPillLabel';
 
 type DemoTaskGroupProps = {
   element: GraphElement;
diff --git a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
index 8a2e48ea..da313b93 100644
--- a/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
+++ b/packages/demo-app-ts/src/demos/pipelinesDemo/DemoPipelinesGroup.tsx
@@ -4,7 +4,6 @@ import {
   GraphElement,
   LabelPosition,
   observer,
-  ScaleDetailsLevel,
   WithContextMenuProps,
   WithDragNodeProps,
   WithSelectionProps
@@ -18,14 +17,14 @@ type DemoPipelinesGroupProps = {
 
 const DemoPipelinesGroup: React.FunctionComponent<DemoPipelinesGroupProps> = ({ element }) => {
   const data = element.getData();
-  const detailsLevel = element.getGraph().getDetailsLevel();
 
   return (
     <DefaultTaskGroup
       element={element}
       collapsible={false}
-      showLabel={detailsLevel === ScaleDetailsLevel.high}
       labelPosition={LabelPosition.top}
+      showLabelOnHover
+      hideDetailsAtMedium
       badge={data?.badge}
     />
   );
diff --git a/packages/module/src/components/nodes/labels/NodeLabel.tsx b/packages/module/src/components/nodes/labels/NodeLabel.tsx
index 8491078c..9e8fd7e0 100644
--- a/packages/module/src/components/nodes/labels/NodeLabel.tsx
+++ b/packages/module/src/components/nodes/labels/NodeLabel.tsx
@@ -22,7 +22,6 @@ export type NodeLabelProps = {
   y?: number;
   position?: LabelPosition;
   centerLabelOnEdge?: boolean;
-  // isLabelPillShape?: boolean;
   boxRef?: React.Ref<SVGRectElement>;
   cornerRadius?: number;
   status?: NodeStatus;
@@ -60,7 +59,6 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
   y = 0,
   position = LabelPosition.bottom,
   centerLabelOnEdge,
-  // isLabelPillShape,
   secondaryLabel,
   status,
   badge,
@@ -204,25 +202,6 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
     filterId = NODE_SHADOW_FILTER_ID_HOVER;
   }
 
-  // if (isLabelPillShape) {
-  //   return (
-  //     <g className={className} ref={refs} transform={`translate(${startX}, ${startY})`}>
-  //       <NodeShadows />
-  //       <rect
-  //         ref={boxRef}
-  //         className={css(styles.topologyNodeLabelBackground)}
-  //         key={`rect-${filterId}-${width}`} // update key to force remount on filter or size update
-  //         filter={filterId && createSvgIdUrl(filterId)}
-  //         x={0}
-  //         y={0}
-  //         width={width}
-  //         height={backgroundHeight}
-  //         rx={cornerRadius}
-  //         ry={cornerRadius}
-  //       />{' '}
-  //     </g>
-  //   );
-  // } else {
   return (
     <g className={className} ref={refs} transform={`translate(${startX}, ${startY})`}>
       <NodeShadows />
@@ -338,6 +317,5 @@ const NodeLabel: React.FunctionComponent<NodeLabelProps> = ({
     </g>
   );
 };
-// };
 
 export default NodeLabel;
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
index 3229ccf2..4a5b8cb6 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx
@@ -67,8 +67,6 @@ export interface DefaultTaskGroupProps {
   GroupLabelComponent?: React.FC<TaskGroupPillLabelProps>;
   /** Center the label on the edge, overrides the label offset, only applicable to expanded groups */
   centerLabelOnEdge?: boolean;
-  /** Applies task node styling to the group label */
-  isLabelPillShape?: boolean;
   /** The Icon class to show in the label, ignored when labelIcon is specified */
   labelIconClass?: string;
   /** The label icon component to show in the label, takes precedence over labelIconClass */
@@ -131,7 +129,6 @@ type PipelinesDefaultGroupInnerProps = Omit<DefaultTaskGroupProps, 'element'> &
 
 const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerProps> = observer(
   ({
-    className,
     element,
     badge,
     onCollapseChange,
@@ -212,7 +209,6 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
     if (element.isCollapsed()) {
       return (
         <DefaultTaskGroupCollapsed
-          className={className}
           element={element}
           shadowCount={collapsedShadowCount}
           onCollapseChange={handleCollapse}
@@ -221,16 +217,7 @@ const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerP
         />
       );
     }
-    return (
-      //  TODO: Support status indicators on expanded state.
-      <DefaultTaskGroupExpanded
-        isLabelPillShape
-        className={className}
-        element={element}
-        onCollapseChange={handleCollapse}
-        {...rest}
-      />
-    );
+    return <DefaultTaskGroupExpanded element={element} badge={badge} onCollapseChange={handleCollapse} {...rest} />;
   }
 );
 
diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
index 1d6bb46e..0caf46bd 100644
--- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
+++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx
@@ -6,8 +6,8 @@ import CollapseIcon from '@patternfly/react-icons/dist/esm/icons/compress-alt-ic
 import NodeLabel from '../../../components/nodes/labels/NodeLabel';
 import { Layer } from '../../../components/layers';
 import { GROUPS_LAYER, TOP_LAYER } from '../../../const';
-import { maxPadding, useCombineRefs, useHover, useSize } from '../../../utils';
-import { AnchorEnd, isGraph, LabelPosition, Node, NodeStyle, ScaleDetailsLevel } from '../../../types';
+import { useCombineRefs, useHover, useSize } from '../../../utils';
+import { AnchorEnd, isGraph, LabelPosition, Node, ScaleDetailsLevel } from '../../../types';
 import { useAnchor, useDragNode } from '../../../behavior';
 import { DagreLayoutOptions, TOP_TO_BOTTOM } from '../../../layouts';
 import TaskGroupSourceAnchor from '../anchors/TaskGroupSourceAnchor';
@@ -28,6 +28,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
       showLabel = true,
       showLabelOnHover,
       hideDetailsAtMedium,
+      status,
       GroupLabelComponent = NodeLabel,
       truncateLength,
       canDrop,
@@ -53,16 +54,13 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
       const [hovered, hoverRef] = useHover(200, 500);
       const [labelHover, labelHoverRef] = useHover(0);
       const dragLabelRef = useDragNode()[1];
-      const [labelSize, labelRef] = useSize([centerLabelOnEdge]);
-      const taskRef = React.useRef();
-      const pillRef = useSize();
       const refs = useCombineRefs<SVGPathElement>(hoverRef, dragNodeRef);
       const isHover = hover !== undefined ? hover : hovered || labelHover;
+      const [labelSize, labelRef] = useSize([centerLabelOnEdge]);
       const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
       const groupLabelPosition = labelPosition ?? element.getLabelPosition() ?? LabelPosition.bottom;
       let parent = element.getParent();
       const detailsLevel = element.getGraph().getDetailsLevel();
-      const { width } = element.getBounds();
 
       let altGroup = false;
       while (!isGraph(parent)) {
@@ -110,23 +108,7 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
         AnchorEnd.target
       );
 
-      const children = element.getNodes().filter((c) => c.isVisible());
-
-      // cast to number and coerce
-      const padding = maxPadding(element.getStyle<NodeStyle>().padding ?? 17);
-
-      const { minX, minY, maxX, maxY } = children.reduce(
-        (acc, child) => {
-          const bounds = child.getBounds();
-          return {
-            minX: Math.min(acc.minX, bounds.x - padding),
-            minY: Math.min(acc.minY, bounds.y - padding),
-            maxX: Math.max(acc.maxX, bounds.x + bounds.width + padding),
-            maxY: Math.max(acc.maxY, bounds.y + bounds.height + padding)
-          };
-        },
-        { minX: Infinity, minY: Infinity, maxX: 0, maxY: 0 }
-      );
+      const bounds = element.getBounds();
 
       const [labelX, labelY] = React.useMemo(() => {
         if (!showLabel || !(label || element.getLabel())) {
@@ -134,17 +116,29 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
         }
         switch (groupLabelPosition) {
           case LabelPosition.top:
-            return [minX + (maxX - minX) / 2, -minY + (centerLabelOnEdge ? 0 : labelOffset)];
+            return [bounds.x + bounds.width / 2, -bounds.y + (centerLabelOnEdge ? 0 : labelOffset)];
           case LabelPosition.right:
-            return [maxX + (centerLabelOnEdge ? 0 : labelOffset), minY + (maxY - minY) / 2];
+            return [bounds.x + bounds.width + (centerLabelOnEdge ? 0 : labelOffset), bounds.y + bounds.height / 2];
           case LabelPosition.left:
-            return [centerLabelOnEdge ? minX : labelOffset, minY + (maxY - minY) / 2];
+            return [centerLabelOnEdge ? bounds.x : labelOffset, bounds.y + bounds.height / 2];
           case LabelPosition.bottom:
           default:
-            return [minX + (maxX - minX) / 2, maxY + (centerLabelOnEdge ? 0 : labelOffset)];
+            return [bounds.x + bounds.width / 2, bounds.y + bounds.height + (centerLabelOnEdge ? 0 : labelOffset)];
         }
-      }, [showLabel, label, element, groupLabelPosition, minX, maxX, minY, centerLabelOnEdge, labelOffset, maxY]);
+      }, [
+        showLabel,
+        label,
+        element,
+        groupLabelPosition,
+        bounds.x,
+        bounds.width,
+        bounds.y,
+        bounds.height,
+        centerLabelOnEdge,
+        labelOffset
+      ]);
 
+      const children = element.getNodes().filter((c) => c.isVisible());
       if (children.length === 0) {
         return null;
       }
@@ -175,13 +169,15 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
 
       const groupLabel = labelShown ? (
         <g ref={labelHoverRef} transform={isHover ? `scale(${labelScale})` : undefined}>
-          <NodeLabel
+          <GroupLabelComponent
+            element={element}
             boxRef={labelRef}
             className={styles.topologyGroupLabel}
             x={labelX * labelPositionScale}
             y={labelY * labelPositionScale}
             position={labelPosition}
             centerLabelOnEdge={centerLabelOnEdge}
+            runStatus={status}
             paddingX={8}
             paddingY={5}
             dragRef={dragNodeRef ? dragLabelRef : undefined}
@@ -199,12 +195,12 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
             labelIconPadding={labelIconPadding}
             onContextMenu={onContextMenu}
             contextMenuOpen={contextMenuOpen}
-            hover={isHover}
+            hover={isHover || labelHover}
             actionIcon={collapsible ? <CollapseIcon /> : undefined}
             onActionIconClick={() => onCollapseChange(element, true)}
           >
             {label || element.getLabel()}
-          </NodeLabel>
+          </GroupLabelComponent>
         </g>
       ) : null;
 
@@ -213,53 +209,15 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro
           <Layer id={GROUPS_LAYER}>
             <g ref={refs} onContextMenu={onContextMenu} onClick={onSelect} className={innerGroupClassName}>
               <rect
-                x={minX}
-                y={minY}
-                width={maxX - minX}
-                height={maxY - minY}
+                x={bounds.x}
+                y={bounds.y}
+                width={bounds.width}
+                height={bounds.height}
                 className={styles.topologyGroupBackground}
               />
             </g>
             {groupLabel && isHover ? <Layer id={TOP_LAYER}>{groupLabel}</Layer> : groupLabel}
           </Layer>
-          {showLabel && (label || element.getLabel()) && (
-            <Layer id={isHover ? TOP_LAYER : undefined}>
-              <GroupLabelComponent
-                element={element}
-                boxRef={labelRef}
-                className={styles.topologyGroupLabel}
-                x={labelX}
-                y={labelY}
-                position={labelPosition}
-                centerLabelOnEdge={centerLabelOnEdge}
-                paddingX={8}
-                paddingY={5}
-                dragRef={dragNodeRef ? dragLabelRef : undefined}
-                // status={element.getNodeStatus()}
-                secondaryLabel={secondaryLabel}
-                truncateLength={truncateLength}
-                badge={badge}
-                badgeColor={badgeColor}
-                badgeTextColor={badgeTextColor}
-                badgeBorderColor={badgeBorderColor}
-                badgeClassName={badgeClassName}
-                badgeLocation={badgeLocation}
-                labelIconClass={labelIconClass}
-                labelIcon={labelIcon}
-                labelIconPadding={labelIconPadding}
-                onContextMenu={onContextMenu}
-                contextMenuOpen={contextMenuOpen}
-                hover={isHover || labelHover}
-                actionIcon={collapsible ? <CollapseIcon /> : undefined}
-                onActionIconClick={() => onCollapseChange(element, true)}
-                width={width}
-                taskRef={taskRef}
-                pillRef={pillRef as any}
-              >
-                {label || element.getLabel()}
-              </GroupLabelComponent>
-            </Layer>
-          )}
         </g>
       );
     }
diff --git a/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx b/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
index 4c1845e4..b4558565 100644
--- a/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
+++ b/packages/module/src/pipelines/components/groups/TaskGroupPillLabel.tsx
@@ -1,95 +1,108 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-// import { NodeLabelProps } from '../../../components';
-import { TaskNodeProps } from '../nodes/TaskNode';
+import styles from '../../../css/topology-components';
 import TaskPill, { TaskPillProps } from '../nodes/TaskPill';
-import { useSize } from '../../../utils/useSize';
 import { NodeLabelProps } from '../../../components';
 import { RunStatus } from '../../types';
-// import { useCombineRefs } from '../../../utils';
+import useCombineRefs from '../../../utils/useCombineRefs';
+import { useSize } from '../../../utils';
+import { LabelPosition, ScaleDetailsLevel } from '../../../types';
 
 export type TaskGroupPillLabelProps = {
   shadowCount?: number;
-  expandable?: boolean;
-  status?: RunStatus;
-} & Omit<TaskNodeProps, 'element'> &
-  Omit<NodeLabelProps, 'status'> &
-  NodeLabelProps &
-  TaskPillProps;
-
-// type PointWithSize = [number, number, number];
+  runStatus?: RunStatus;
+  labelOffset?: number;
+} & NodeLabelProps &
+  Omit<TaskPillProps, 'status' | 'pillRef'>;
 
 const TaskGroupPillLabel: React.FC<TaskGroupPillLabelProps> = ({
   element,
-  // children,
-  // className,
-  // paddingX = 0,
-  // paddingY = 0,
-  // cornerRadius = 4,
-  x = 0,
-  y = 0,
-  // position = LabelPosition.bottom,
-  // centerLabelOnEdge,
-  // secondaryLabel,
-  // status,
+  labelOffset = 17,
   badge,
   badgeColor,
   badgeTextColor,
   badgeBorderColor,
   badgeClassName,
-  // badgeLocation = BadgeLocation.inner,
-  // labelIconClass,
-  // labelIcon,
-  // labelIconPadding = 4,
+  runStatus,
   truncateLength,
-  width,
-  // dragRef,
-  // hover,
-  // dragging,
-  // edgeDragging,
-  // dropTarget,
+  boxRef,
+  position,
+  centerLabelOnEdge,
   onContextMenu,
   contextMenuOpen,
   actionIcon,
-  // actionIconClassName,
   onActionIconClick,
-  // everything that's in node label pass here?
   ...rest
 }) => {
-  const taskRef = React.useRef();
-  const pillRef = useSize();
-  // const labelLocation = React.useRef<PointWithSize>();
+  const [labelSize, labelRef] = useSize([]);
+  const pillRef = useCombineRefs(boxRef, labelRef);
+  const labelWidth = labelSize?.width || 0;
+  const labelHeight = labelSize?.height || 0;
+
+  const bounds = element.getBounds();
+
+  const detailsLevel = element.getGraph().getDetailsLevel();
+  const scale = element.getGraph().getScale();
+  const medScale = element.getGraph().getDetailsLevelThresholds().medium;
+  const labelScale = detailsLevel !== ScaleDetailsLevel.high ? Math.min(1 / scale, 1 / medScale) : 1;
+  const labelPositionScale = detailsLevel !== ScaleDetailsLevel.high ? 1 / labelScale : 1;
 
-  // const refs = useCombineRefs<SVGPathElement>(hoverRef, dragNodeRef);
+  const { startX, startY } = React.useMemo(() => {
+    let startX: number;
+    let startY: number;
+    const scaledWidth = labelWidth / labelPositionScale;
+    const scaledHeight = labelHeight / labelPositionScale;
+
+    if (position === LabelPosition.top) {
+      startX = bounds.x + bounds.width / 2 - scaledWidth / 2;
+      startY = bounds.y - (centerLabelOnEdge ? scaledHeight / 2 : labelOffset);
+    } else if (position === LabelPosition.right) {
+      startX = bounds.x + bounds.width + (centerLabelOnEdge ? -scaledWidth / 2 : labelOffset);
+      startY = bounds.y + bounds.height / 2;
+    } else if (position === LabelPosition.left) {
+      startX = bounds.x - (centerLabelOnEdge ? scaledWidth / 2 : scaledWidth + labelOffset);
+      startY = bounds.y + bounds.height / 2;
+    } else {
+      startX = bounds.x + bounds.width / 2 - scaledWidth / 2;
+      startY = bounds.y + bounds.height + (centerLabelOnEdge ? -scaledHeight / 2 : labelOffset);
+    }
+    return { startX, startY };
+  }, [
+    labelPositionScale,
+    position,
+    bounds.width,
+    bounds.x,
+    bounds.y,
+    bounds.height,
+    centerLabelOnEdge,
+    labelHeight,
+    labelOffset,
+    labelWidth
+  ]);
 
   return (
     <TaskPill
+      {...rest}
       element={element}
-      width={width}
-      taskRef={taskRef}
-      pillRef={pillRef as any}
+      width={labelWidth}
+      pillRef={pillRef}
       actionIcon={actionIcon}
       onActionIconClick={onActionIconClick}
-      // className={styles.topologyGroupLabel}
-      x={x}
-      y={y}
+      className={styles.topologyNodeLabel}
+      status={runStatus}
+      x={startX * labelPositionScale}
+      y={startY * labelPositionScale}
       paddingX={8}
       paddingY={5}
-      // secondaryLabel={secondaryLabel}
+      scaleNode={false}
       truncateLength={truncateLength}
       badge={badge}
       badgeColor={badgeColor}
       badgeTextColor={badgeTextColor}
       badgeBorderColor={badgeBorderColor}
       badgeClassName={badgeClassName}
-      // status={status as RunStatus}
-      // badgeLocation={badgeLocation}
-      // labelIconClass={labelIconClass}
-      // labelIcon={labelIcon}
-      // labelIconPadding={labelIconPadding}
       onContextMenu={onContextMenu}
       contextMenuOpen={contextMenuOpen}
-      {...rest}
     />
   );
 };
diff --git a/packages/module/src/pipelines/components/groups/index.ts b/packages/module/src/pipelines/components/groups/index.ts
index 0784ce94..89a22d9e 100644
--- a/packages/module/src/pipelines/components/groups/index.ts
+++ b/packages/module/src/pipelines/components/groups/index.ts
@@ -2,4 +2,4 @@ export type { EdgeCreationTypes } from './DefaultTaskGroup';
 export { default as DefaultTaskGroup } from './DefaultTaskGroup';
 export { default as DefaultTaskGroupExpanded } from './DefaultTaskGroupExpanded';
 export { default as DefaultTaskGroupCollapsed } from './DefaultTaskGroupCollapsed';
-export { default as GroupPillLabel } from './TaskGroupPillLabel';
+export { default as TaskGroupPillLabel } from './TaskGroupPillLabel';
diff --git a/packages/module/src/pipelines/components/nodes/TaskPill.tsx b/packages/module/src/pipelines/components/nodes/TaskPill.tsx
index 3b1c4aea..49d9f108 100644
--- a/packages/module/src/pipelines/components/nodes/TaskPill.tsx
+++ b/packages/module/src/pipelines/components/nodes/TaskPill.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { action } from 'mobx';
 import { css } from '@patternfly/react-styles';
 import styles from '../../../css/topology-pipelines';
 import topologyStyles from '../../../css/topology-components';
 import { Popover, Tooltip } from '@patternfly/react-core';
 import { observer } from '../../../mobx-exports';
-import { Edge, Node, ScaleDetailsLevel } from '../../../types';
+import { Node, ScaleDetailsLevel } from '../../../types';
 import { RunStatus } from '../../types';
 import { truncateMiddle } from '../../../utils/truncate-middle';
 import { createSvgIdUrl, useCombineRefs, useHover, useSize } from '../../../utils';
@@ -26,11 +25,11 @@ const STATUS_ICON_SIZE = 16;
 
 export interface TaskPillProps extends Omit<TaskNodeProps, 'element'> {
   verticalLayout?: boolean;
-  width: number;
+  width?: number;
   x: number;
   y: number;
-  taskRef: React.Ref<SVGGElement>;
-  pillRef: React.Ref<SVGRectElement>;
+  taskRef?: React.Ref<SVGGElement>;
+  pillRef: (node: SVGGraphicsElement) => void;
   element: Node;
 }
 
@@ -40,6 +39,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     taskRef,
     pillRef,
     className,
+    width = 0,
     paddingX = 8,
     paddingY = 8,
     status,
@@ -82,7 +82,6 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     const [hovered] = useHover();
     const taskIconComponentRef = React.useRef();
     const isHover = hover !== undefined ? hover : hovered;
-    const { width, height: boundsHeight } = element.getBounds();
     const label = truncateMiddle(element.getLabel(), { length: truncateLength, omission: '...' });
     const [textSize, textRef] = useSize([label, className]);
     const nameLabelTriggerRef = React.useRef();
@@ -204,28 +203,6 @@ const TaskPill: React.FC<TaskPillProps> = observer(
       width
     ]);
 
-    React.useEffect(() => {
-      const sourceEdges = element.getSourceEdges();
-      action(() => {
-        const indent = detailsLevel === ScaleDetailsLevel.high && !verticalLayout ? width - pillWidth : 0;
-        sourceEdges.forEach((edge: Edge) => {
-          const data = edge.getData();
-          if ((data?.indent ?? 0) !== indent) {
-            edge.setData({ ...(data || {}), indent });
-          }
-        });
-      })();
-
-      return action(() => {
-        sourceEdges.forEach((edge: Edge) => {
-          const data = edge.getData();
-          if (data?.indent) {
-            edge.setData({ ...(data || {}), indent: 0 });
-          }
-        });
-      });
-    }, [detailsLevel, element, pillWidth, verticalLayout, width]);
-
     const scale = element.getGraph().getScale();
 
     const nameLabel = (
@@ -249,6 +226,16 @@ const TaskPill: React.FC<TaskPillProps> = observer(
       onSelect && styles.modifiers.selectable
     );
 
+    // Force an update of the given pillRef when dependencies change
+    const pillUpdatedRef = React.useCallback(
+      (node: SVGGraphicsElement): void => {
+        pillRef(node);
+      },
+      // dependencies causing the pill rect to resize
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [pillClasses, width, height]
+    );
+
     let filter: string;
     if (runStatusModifier === styles.modifiers.danger) {
       filter = createSvgIdUrl(NODE_SHADOW_FILTER_ID_DANGER);
@@ -305,6 +292,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
     if (showStatusState && !scaleNode && hideDetailsAtMedium && detailsLevel !== ScaleDetailsLevel.high) {
       const statusBackgroundRadius = statusIconSize / 2 + 4;
       const upScale = 1 / scale;
+      const { height: boundsHeight } = element.getBounds();
 
       const translateX = verticalLayout ? width / 2 - statusBackgroundRadius * upScale : 0;
       const translateY = verticalLayout ? 0 : (boundsHeight - statusBackgroundRadius * 2 * upScale) / 2;
@@ -368,7 +356,7 @@ const TaskPill: React.FC<TaskPillProps> = observer(
           x={offsetX}
           y={0}
           width={pillWidth}
-          ref={pillRef}
+          ref={pillUpdatedRef}
           height={height}
           rx={height / 2}
           className={css(styles.topologyPipelinesPillBackground)}
diff --git a/packages/module/src/pipelines/components/nodes/index.ts b/packages/module/src/pipelines/components/nodes/index.ts
index 3fdcc26c..4d2496bf 100644
--- a/packages/module/src/pipelines/components/nodes/index.ts
+++ b/packages/module/src/pipelines/components/nodes/index.ts
@@ -2,4 +2,5 @@ export { default as FinallyNode } from './FinallyNode';
 export { default as SpacerNode } from './SpacerNode';
 export { default as StatusIcon } from '../../utils/StatusIcon';
 export { default as TaskNode } from './TaskNode';
+export { default as TaskPill } from './TaskPill';
 export { default as WhenNode } from '../../decorators/WhenDecorator';