feat(content-item): set 100% height - FRONT-4627

[emeryro]

Make content item take 100% height (similar to cards)

[github-actions]

🚀 Deployed on https://ecl-preview-3654--europa-component-library.netlify.app

[planctus]

Not really convinced by this. as i wasn't in the past regarding the card, this doesn't ensure "same height" for the items unless their parent items are equally tall. Basically i see this as a side effect of our grid system, using 100% on an item as the single child of a column wrapper makes it "align" since the two columns wrappers are inside the same row.

But regarding this, in relation to the page example, it seems overwhelming to define a markup where each item needs a column wrapper on its own, we should have an easier way to place items in a flex container having the chance to define their width so that it can be used to generate a multiple column layout. This container will use align-items: stretch and items would be equally tall.

To me this has more drawbacks and potential downsides when used in a different layout than the one where it might improve the current situation and we could identify, even with just the utilities (we miss some..), a way ot define "layouts" not using a complex grid markup and with "equally tall" items

[emeryro]

I don't fully agree here. What is true is that we would need to think about a better way to handle layouts; this should be in the scope of ECL 5. We already have a few components able to be displayed in several columns, but we need a more global approach.

In most cases, this kind of component (content item, cards, ...) are used in some kind of grid display: each item is taking one or more column in a dedicated row. That's probably not optimal in terms of generated markup, but that's how it is done currently.
Having a column based layout instead of row would probably result in some design inconsistency (no way to ensure that the columns have more or less the same height for instance).

The proposed improvement would fix some small display inconsistencies, like on the main EC site

Now if you see potential risks and drawbacks of these few extra css lines, we should investigate more. I tried it in different scenario (within the grid or not), and didn't notice display issues, but I may have missed some cases

[planctus]

It is true that with the current implementations in ewpp with these styles we would fix a relevant number of their layout with items, but still it feels wrong to me to use something like this to achieve a result that might be better handled in a different way, most likely.
The issue for me is that setting height: 100% has a predictable behavior only when used in an element whose parent has a defined height, which is not our case, although being in a "row" it behaves a bit like align-items: stretch and it works.

An idea could be to set this only for desktop? Does this have an intended role also in mobile?
Another idea could be to have a parameter to activate/disactivate this when needed, but this would imply work on the integration side.

[emeryro]

The change is no longer applied on mobile