[Bug]: bigger size of mushroom card in sections type of dashboard

[hrw]

Requirements

• [X] I checked the troubleshooting section in the README to verify that I have the latest Mushroom version.
• [X] I did a search to see if there is a similar issue or if a pull request is open.
• [X] I have read the state of card mod support (in pin issues) and understand card mod support is not provided in this repository.

Current Behavior

I use Mushroom cards for quite a while. With HA 2024.3 release I wanted to take a look at their new type of dashboard ("sections"). Updated Mushroom cards to v3.5.2 and started copying items.

Things work as expected but sizes differ in a visible way. I do not know is it HA fault or Mushroom cards.

Masonry type of dashboard:

Sections type of dashboard:

Expected Behavior

I would rather expect the same size. But 'sections' dashboard type is marked as experimental so probably this is the reason.

Steps To Reproduce

1. create 'sections' dashboard
2. add Mushroom card
3. compare with same card on 'masonry' dashboard

Context

YAML state

Environment

- Browser: Firefox
- HA Version: 2024.3.0
- Mushroom: v3.5.2

Anything else?

No response

[L3odalton]

Same issue for me. It is most visible when using two chips-stacks below each other.

[ptashek]

Seeing the same with HA 2024.3 + Mushroom 3.5.2 and sections layout.

It looks like in the sections layout, there is a parent div wrapper around the mushroom card container, which has a fit-rows and a card class applied to it. That selector defines only one attribute: height

.card.fit-rows {
    height: calc((var(--row-size, 1)*(var(--grid-row-height) + var(--grid-gap))) - var(--grid-gap));
}

When this style is disabled in dev tools, the card renders as expected, and same as in the masonry layout.

[piitaya]

@ptashek I fixed your issue with when using multiline_secondary options with https://github.com/piitaya/lovelace-mushroom/pull/1402. It's available in 3.5.4 release.

@hrw The sections view is still experimental and cards are forced to fit the grid for now so it's not a Mushroom issue. As I'm working in the HA front-end team, I can tell you that we are thinking about a way to resize card using the UI.

For now, using this yaml code on the card should fix your issue.

layout_options:
   grid_rows: auto

[Depechie]

@piitaya your suggestion about the grid rows, would this also fix the gap we now have while using chips and the new sections layout? cfr example below. Because adding

card_mod:
  style: |
    ha-card {
      margin-bottom: -66px;
    }

to the chips card has no effect.

But I do not understand your ayout_options suggestion, where and how should this be added?

[sylv3rblade]

i have the same issue

i found a hacky way to fix it by going into developer tools and override the --row-height variable to 33px on the .container element that contains the chip cards but i havent found a way to fix this using the card mod (because it's outside the mushroomcard element)

the result

[marcopaggioro]

Maybe correlated with the fact that the card do not fill orizontally the column even if "fill container" is selected?

[igorsantos07]

I just came here to report the problem with single-row chip cards, and noticed that layout_options: { grid_rows: auto } doesn't solve the issue (it's also not a solution for empty auto-entites, although both are related to the variable below).

I did indeed notice that --row-height seems to be the culprit - I'm not sure why it is so big, as changing it doesn't seem to affect other cards, since most of them are usually bigger than the 66px in height. That said, that variable should go back to 66px when in edit mode, otherwise the user might have a hard time hitting the edit button.

A workaround for this issue with chips is adding them to a vertical-stack with the previous/next card; but this is not feasible in my scenario since I'm using the new Visibility option, and that's not available for sub-cards right now.