Automatic truncation of text is inconsistent (TooltipTruncatedText component)

[sgress454]

We use the <TooltipTruncatedText> component to wrap text that should be truncated with an ellipses at a certain length, and should get a tooltip on hover only when truncated.

The component seems to have a couple of issues handling resizes after it initially renders, resulting in the text being cut off without ellipses being added.

A couple of reproductions:

1. View the host details page for a host with mdm enabled and a relatively long mdm server URL (e.g. https://dogfood.fleetdm.com/hosts/1293). If you view the page at full width, and then resize the page to be narrower, the mdm server URL gets cut off. If you then refresh the page, the mdm server URL will be truncated as expected, and it will resize as expected if you make the page wider or narrower.
2. On the manage policies page, add or edit a policy to have a very long name, and then go to Manage Automations -> Install Software. In the modal, click the checkbox next to the policy with the long name. The name will be cut off by the "Select software" dropdown that appears. If you select an item from the dropdown and then save, and then re-open the modal, the truncation and tooltip will work as expected.

This could be a combination of the components internal workings, and undocumented requirements for the container that it's placed in (i.e. the container may need certain styles applied for the component to work properly).

[sharon-fdm]

Hey team! Please add your planning poker estimate with Zenhub @dantecatalfamo @jacobshandling @sgress454

[sharon-fdm]

3 points is probably a bold estimation. Being positive here.

[fleet-release]

Text trims like moon's wane, Ensuring clarity reigns, In Fleet's vast domain.