Sections: unable to place more than 1 cards next to 3x3 card.

[AJediIAm]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I'm trying to create a section with a 3x3 card next to 3 1x1 cards. After placing the first 1x1 card, the option to place additional cards disappears.

Update: the picture element turned out to be a 3x1 card while showing as a 3x3 or 3x4 card. This is why only 1 card could be placed next to it.

Describe the behavior you expected

I would expect to be able to place 3 1x1 cards next to the 3x3 card.

Update:
I would expect a picture element to have a height of at least the height of the picture.

Steps to reproduce the issue

1. Add a 3x3 card to the sections dashboard
2. Add a 1x1 card next to the 3x3 card
3. Observe how it is no longer possible to add additional cards next to the 3x3 card while there still is space.
   ...

Update:

1. Add a picture element to a sections dashboard.
2. Observe how the height is set to 1 while the actual hight may look closer to 3 or 4.

What version of Home Assistant Core has the issue?

20241106.2

What was the last working version of Home Assistant Core?

2024.11.2

In which browser are you experiencing the issue with?

Chrome 131.0.6778.39

Which operating system are you using to run this browser?

Android

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[wendevlin]

Hi @AJediIAm,
I cannot reproduce it. Can you try to move around the big card instead of the small ones?

[AJediIAm]

Hi @AJediIAm, I cannot reproduce it. Can you try to move around the big card instead of the small ones?

Hi @wendevlin,
Thanks for trying it out.

After a bit of fiddling, I realized the picture element card had a layout of 1 high and 3 wide while it showed the picture at its full height (which is closer to 4 high).
This explains why only one button could be placed next to it.
After changing the height, the picture element adjusted accordingly and the buttons could be lined up according to the now correct height.

So, the actual bug is the initial height of the picture element.

[piitaya]

Hi 👋 Yeah all cards are not migrated yet to support the grid system. As a workaround, you have to set the size manually for now.

[AJediIAm]

Hi 👋 Yeah all cards are not migrated yet to support the grid system. As a workaround, you have to set the size manually for now.

Ok, so it's a known issue.
Any reason to keep the issue open for tracking?

[piitaya]

We can close it, this issue will be fixed when we will redesign and adapt the card to the grid section. There is no need to keep it open. Thank you for the report.