[Metrics UI] Broken overlay header with long names

[sgrodzicki]

Kibana version: 8.0.0-SNAPSHOT

Elasticsearch version: 8.0.0-SNAPSHOT

Server OS version: ¯\_(ツ)_/¯

Browser version: Google Chrome Version 86.0.4240.198 (Official Build) (x86_64)

Browser OS version: macOS Catalina Version 10.15.7

Original install method (e.g. download page, yum, from source, etc.): ¯\_(ツ)_/¯

Describe the bug: The new Enhanced Host Details overlay does not support long names quite well.

Steps to reproduce:

1. Go to inventory view on Metrics UI (/app/metrics/inventory)
2. Switch to Docker view (Show: Docker Containers)
3. Search for container with long name (e.g., container.id: d69afadcd57b3dff359f8f194a3227254a115cbd4e230852246836e03dfbe3a7)
4. Click on container and select **** [NEW] Overlay ****

Expected behavior: Text overflow should be handled gracefully (e.g., render an ellipsis ("…") to represent the clipped text)

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[phillipb]

@sgrodzicki Do you think there's value in seeing the full name and just wrapping it to a second line? In the case of k8s because of the way hostnames are generated, many host will have long names and the suffix is the only way to tell the difference. If we don't show the full name here, there's nowhere else in our UI that they can get it.

[sgrodzicki]

Can we do something like abcd…klm instead of abcdefg… for abcdefghijklm? title could be another option.

[jasonrhodes]

Ellipsis plus tooltip and/or title seems like the easiest solution. Long-term, I think we should be aware of values that tend to be like this and treat them differently than "titles" because there isn't any solution that looks great for a title in these cases. Design mockups may just need to pretend like every value in these cases is "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" ;)