foreman
foreman copied to clipboard
Fixes #35294 - Switch to masonry card layout for Details tab
Our implementation of the Details tab didn't look like the original mockups because we used Patternfly's Grid layout, which means cards must be a uniform height across columns.
This PR changes to a vertical flex layout for Details tab cards, which brings several advantages:
- cards don't have to be uniform heights
- smaller cards take up less vertical space
- the height of a card is independent from the height of the cards in adjacent columns
The flex layout has a maximum height and wraps cards to the next column as needed. With this change, cards will fill in from top to bottom first, then left to right.
Issues: #35294
Requires https://github.com/Katello/katello/pull/10216
Leaving in draft until I can demo it for @MariSvirik :)
@MariSvirik Updated the max-height to calc(100vh - 225px)
which accounts for the title bar and tabs etc.