Lovelace Cards: Update size calcs and add height fixes for horizontal stacks

[zsarnett]

Breaking change

Yes. This will change the way Users layouts will display. BUT this is how this should have been done in the first place. We should compare 1 unit to 1 regular entity row. If the card goes into the next row size at all then it should be + 1 size. This will help Custom View better know the starting size of the cards

Proposed change

Update sizes of cards

Type of change

• Code quality improvements to existing code or addition of tests

Additional information

This is part of my Drag and Drop PR but I am breaking this out since it is a breaking change.

[zsarnett]

Here are a few examples

Examples

[iantrich]

@zsarnett how does this compare to now?

[zsarnett]

@iantrich This doesn't change the actual sizes of any card. It just reports them better

[zsarnett]

Want to retest the horizontal stack stuff before this is merged and maybe make a few adjustments for entity filter conditional cards etc (this is mostly code from my drag and drop PR, for the horizontal stack fixes)

[zsarnett]

So I think we should make image/picture cards the height 100% of the card. Example:

This comes into play more for the Drag and drop. If I resize my picture card the image should fill the div

[zsarnett]

[bramkragten]

We should not stretch the image right? Maybe we can add a option for contain/cover/stretch/center/repeat/whatever... But the default should be cover I think?

[zsarnett]

Its not a background image though its an image..

Without it being an image we don't really know what the height should be

[bramkragten]

Would work if you use the aspect ratio option... But yeah...

But stretching the image is a no-go for me, in the drag and drop maybe, as the users set the height themselves (and you could use a div with a background?)

[zsarnett]

I will leave it out for now and determine what is needed in the Drag and drop PR

[bramkragten]

We don't need display: block anymore? What is changed?

[ronaldtveen]

Its not a background image though its an image..

Without it being an image we don't really know what the height should be

I was watching @zsarnett stream recording and in that you mentioned this ^^
Actually, there is a (well supported) way to cover or contain the img tag, not not just a background image. IE has no support (go figure) but all major browsers are perfectly fine with it.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

I have to agree with Bram about the stretching of images, that is a big no-no in any situation.