Fix running status indicator for narrow screen widths
What does this MR do and why?
This MR simply updates the styling of the continuous integration progress. It adds a height attribute to ensure that the height does not expand with the parent container.
This has been an issue when the the screen width is narrow to the point where the contents of the environmentMessage takes up more than one line. The icon would take up the entire height, leading it to look stretched. This change addresses this behavior by explicitly setting the height to a value, and not letting it react to the height of the parent.
This change assumes that all implementations the CI icon component will never be displayed at the full height, and will always have a finite height equal to its width (square dimensions).
References
Issue here.
Screenshots or screen recordings
| Before | After |
|---|---|
|
|
How to set up and validate locally
- Log in and kick off a deploy/job with a deployment status, including the environment name, path, last deployment, etc.
- Verify that the continuous integration icon is displayed
- Adjust the width of the screen until the deployment status copy takes up two or more lines.
- Verify that the continuous integration icon has an even width to height ratio, and sticks to the top of the container.