Sections - Customize row/card height

Feature Requests
1

The new sections adjusted row-height in a way that can’t be card-modded (it’s on parent and you can’t reach them) nor themed (it gets overruled).

For some compact cards like Titles, it creates lots of blank space, which is specially annoying in small screens.

image
image1035×625 88 KB

Just deleting the --row-height value or setting it to 0 does the trick, and it doesn’t break anything. Before you could work around this by using negative margins with card-mod, but now even if you do, the min-height is enforced by the parent.

This could be adjustable, or as easy as a setting like the “Force square” in Grid cards. If either you want a small card to fit the row, or just compact based on its content (my preferred way).

Link to the HA sections release deep dive

2

Just found out this was the cause of my dashboards that have been migrated to sections to have a lot of unneeded whitespace. Did anyone find a workaround for this yet?

3

Hi,

same here. I have a custom:mushroom-chips-card a the top of a row and card have row height of 66px and it’s to big:

image

image

1 Like
4

I have the exact same problem. Currently no solution to this but not using sections at all (when certain cards like eg. mushroom-chips are required).

5

Same exact issue… I’m using bubble card dividers in my sections view and it’s leaving a ton of white space. If I uncheck it in dev view it’s PERFECTION!

6

As a workaround, I stick the cards in a vertical stack (or a layout-card for even more control).

I lose the drag-and-drop functionality but sometimes it’s still better than going back to the old Masonry layout.

1 Like
7

I had the same issue you described. I ended up using a vertical stack with only the bubble separator inside. This entirely fixes the issue