Fixes #33876 - Fix content view card styles

[jeremylenz]

What are the changes introduced in this pull request?

• Change CV card layout to a single column so that longer CV names have more room and look okay
• Bump font size down to 14px for CV name and version link
• Increase card width from 3 to 4 for lg-sized screens (units are twelfths of the overall grid, so the card now takes up a third of the width on lg-size screens)
• Fix capitalization

See the Redmine issue #33876 for the before pic

Considerations taken when implementing this change?

I removed the Patternfly <DescriptionList> components because they weren't adding any benefits. They don't even create <dt>, <dl> or <dd> elements; they were just spans with classes.

I put some flex containers in to guarantee that

• Content view icon and "Content view" text are always on the same line
• The above and the actual CV name are always on a different line
• The "Version in use" label and the actual version name are always on a different line

however, the line with the CV name and the environment can still wrap if it needs to.

What are the testing steps for this pull request?

• Look at the CV card for a host in Default Organization View
• Test with several different screen widths
• Reload the page after changing screen width (unfortunately, some of our styles result from JS and not CSS)

[theforeman-bot]

Issues: #33876

[jturel]

Looks like a good set of improvements. The only comment I have is that the space between the cv icon and 'Content view' seems unnecessarily large. Too much of a right margin on the icon perhaps?

[jeremylenz]

@jturel thanks, should be fixed now!

Also added alignItems: 'center' so that the text and icon look better together.

[jturel]

ACK!