Fixes #34755 - Fix text/icon alignment on host status card

[jeremylenz]

This is an attempt to improve the alignment and spacing of the text and icons on the AggregateStatusCard.

Before:

After:

let me know your thoughts

[ofedoren]

Just out of curiosity: do we have to use inline styling here?.. Couldn't it be extracted to the corresponding scss file?

[jeremylenz]

Couldn't it be extracted to the corresponding scss file?

I played around with it for a bit, but I'm realizing would be quite tedious to do it that way. I would have to add classes to several elements that don't have them, and modify others, and also come up with a CSS solution for the props override of the style I do for <StatusIcon> - it's possible, but I just don't see a reason to. Would you be okay keeping it as-is for this reason?

[Ron-Lavi]

Overall looks great, there's a small issue when hovering the icons:

[jeremylenz]

@Ron-Lavi good catch! The elements inside the <a> were all underlined, but since I moved the icon into alignment with position: relative its underline also moved.

Updated to no longer underline the icon on hover.

[Ron-Lavi]

Thanks @jeremylenz!