Fleet UI: Host details page > About section can overflow

[RachelElysia]

Fleet version: <!-- Copy this from the "My account" page in the Fleet UI, or run fleetctl --version -->

Web browser and operating system:

---

💥  Actual behavior

On the host details page, the About section is overflowing on the right side of the screen

🧑‍💻  Steps to reproduce

1. Host details page of a really long email address
2. Shrink page width

🕯️ More info (optional)

N/A

Have the div wrap instead of overflow

[jacobshandling]

@noahtalerman this and various related layout bugs are being caused by longer values for each of these pieces of data, for example the values of MDM server URL and Used by below:

Something(s) will have to give - what layout elements here do we want to be more flexible (could just be at lower viewport width) to accommodate, and how so? Some possibilities:

• Allow values to wrap to more than one line (not as trivial as it sounds, since some of these values are composite JSX elements and not simple strings which would nicely wrap automatically)
• Decrease gap between columns of this grid
• Truncate longer values with ellipses, put full value in a tooltip
• Same as above, internally truncated - for example:
• 

[noahtalerman]

Hey @jacobshandling! Thanks for laying out the options. what do you think we should do?

[RachelElysia]

Hey @jacobshandling! Thanks for laying out the options. what do you think we should do?

@noahtalerman I built a fix in #22257, check out the loom on the PR and lmkwyt!

[noahtalerman]

@RachelElysia looks good!

Do you know how we could improve this long dotted line?

Is there another way we indicate tooltip on hover today? Maybe italics?

Maybe we could borrow the italics styles (like from software page) and just show 2 users instead of the "really long user + more" UI

[fleet-release]

Overflow tamed, content wraps, Fleet's web page breathes anew, Ease found in the gaps.