Align package details vertically centered

[lukasbableck]

This PR fixes the uneven top and bottom gaps for the .package__details element.

Before:

After:

[zoglo]

Wouldn't work in this case:

The container itself would need to be wrapped.

[lukasbableck]

True, or we just apply this if >1024px 😄

[zoglo]

@lukasbableck wouldn't an align-self: center; on the .package-details do the same since the parent is already a flex container that stretches the items 😉(You'd be able to drop the media query and there is no need changing it to flex completely).

[lukasbableck]

Not quite... This would not center the .package__about which looks kinda weird IMO.

And apparantly this also doesn't fully work if the .packageabout is taller than the .packagerelease and .package__actions.

[zoglo]

I still feel like that the align-self version would be better towards the image - we are talking about "pixel-perfect" design right now and the d-flex centered version would still bother someone that'll compare it to the height of an image 🤷

[lukasbableck]

The image height currently doesn't match anyway, it just happens to kinda (not exactly) visually fit with the Contao logo because that one is not square. For something like contao-rocksolid-icon-picker which provides a square icon, the height doesn't match with any of those options. So maybe there is more to change?

[zoglo]

If you change the scope of your PR and rename it, you may want to match the styles with the ones in this commit: https://github.com/contao/package-list/commit/ba6b2a996d9272fa63b6013979a36a29d03330cc.

The icons were resized to 100px in the package list and aren't centered on landscape to show the logo. That may give the package-details just enough height that the container wouldn't need to be centered as well.

What if we'd align-self AND center with your version at 1024px? The container itself needs to be centered, so do the items as seen in the screenshots.

[aschempp]

Shouldn't this be fixed in the package-list itself (instead of the Contao Manager)?

[zoglo]

@aschempp that's not part of the package-list, it's the installed packages, they aren't really related (right now)

[zoglo]

Screenshots of the current PR @aschempp

Mobile

< 1024px

>=1024px

[aschempp]

Thank you @lukasbableck