rux-monitoring-progress doesn't work inside a display: grid

[micahjones13]

Describe the bug When using rux-monitoring-icon inside a display: flex, the styling of the component gets messed up.

To Reproduce Steps to reproduce the behavior:

1. Create a display: grid
2. Add a rux-monitoring-icon as an grid item
3. See the top and bottom parts of rux-monitoring-icon split

Current behavior The styling breaks when put inside a display: grid

Expected behavior It shouldn't break inside a display grid

Screenshots

CodeSandbox https://codepen.io/micahjones/pen/poKyWQW

Environment (please complete the following information):

na

Additional context This can be fixed by adding width: fit-content to either the parent div or the component itself. The overall styling of rux-monitoring-progress needs looked at. Perhaps not having min/max width? https://github.com/RocketCommunicationsInc/astro/blob/main/packages/web-components/src/components/rux-monitoring-icon/rux-monitoring-icon.scss

[micahjones13]

I'd also be interested to see if this issue applies to rux-monitoring-progress-icon as well, seeing as they are similar