[ic-tree-item] Issues with other elements when truncating a tree item

[GCHQ-Developer-530]

Summary of the bug

When truncating the text label on a tree item, a tooltip should show.

If you add an icon to a tree item and a really long label, the tooltip shows but the icon is not centred. If you add an extra long label to a parent tree item, the tooltip shows but the arrow dropdown disappears. If you append the dropdown to the tree content before the tooltip e.g.

if (!tooltip) {
        const tooltipEl = document.createElement("ic-tooltip");
        tooltipEl.setAttribute("target", this.el.id);
        tooltipEl.setAttribute("label", typographyEl.textContent);
        tooltipEl.classList.add("ic-tooltip-overflow");
        tooltipEl.setAttribute("placement", "right");
        this.isParent && treeContent.appendChild(this.dropdownSpanEl); // ADD IN THIS LINE
        treeContent.appendChild(tooltipEl);
        tooltipEl.appendChild(typographyEl);
      }

Then the tooltip doesn't show as it's appended after the typography element in the DOM, with nothing inside it.

Separate to all of this behaviour, on our guidance site (v3 tree view branch) if you add a label that's too long, it doesn't truncate at all - just wraps.

📸 Screenshots or code

Guidance site behaviour:

Current storybook behaviour:

Storybook behaviour if you append the dropdown span:

🧐 Expected behaviour

Truncation should work the same for any tree item no matter the other elements in the tree content.

Additional info

When fixing this issue, please check that it works in the design system tree view branch too by doing npm pack in the ui kit canary web components, react and docs folders and installing that locally on the tree view branch.

NOTE: This behaviour has been seen by amending the focus inset storybook example as it represents the guidance site, but the code suggests it's probably an issue when focusInset={false} as well.

[GCHQ-Developer-530]

Also check if the icon needs the styles sorting when tree view header is truncated

[ad9242]

wrapping the truncateTreeItemLabel in componentDidLoad in a setTimeout seemed to help with truncation (it already does this for the treeview header label)

however, the tooltip get's hidden behind the page header