Sections View Tile Card Content Area Increases In Height By 10px for Every Feature Added

[Nerwyn]

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

For tile cards in sections views, every feature added adds 10px to the content (icon and entity info) area height. As you add more features to a card (like four features on a climate card) it can become very tall and unsightly. This can be further exacerbated by increasing the tile's layout grid rows.

Describe the behavior you expected

Tile card content area should be consistent as more features are added, unless the layout grid rows is increased passed it's minimum. If the layout grid rows is increased passed it's minimum, maybe the additional space can be spread between the content area and all of the features?

Steps to reproduce the issue

1. Create a sections view (or use an existing one).
2. Add a tile card and set it's entity to one of a domain with built in features (like climate).
3. Add multiple features. Note how the top content area increases in height with each one.

What version of Home Assistant Core has the issue?

2024.8

What was the last working version of Home Assistant Core?

2024.7

In which browser are you experiencing the issue with?

Brave 1.68.137, Firefox 129.0, Android Companion App 2024.7.5

Which operating system are you using to run this browser?

Windows 11, Android 15 beta

State of relevant entities

No response

Problem-relevant frontend configuration

features:
  - type: climate-fan-modes
    style: dropdown
  - type: climate-hvac-modes
  - type: climate-preset-modes
    style: dropdown
  - type: target-temperature
type: tile
entity: climate.downstairs_thermostat
layout_options:
  grid_columns: 4
  grid_rows: 5
vertical: false

Javascript errors shown in your browser console/inspector

NA

Additional information

Disabling/Removing flex from the tile card content styles here removes the dead space around the tile card header, but in turn moves it to the bottom of the card. At 3-4 card features this dead space is almost equivalent to a grid row.

Some more involved tile card sections height calculation could be used to remove dead space from tile cards with 3+ features.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[Nerwyn]

This issue is still present in the latest version of the Home assistant core and frontend (2024.10.4 and 20241002.4). It should not be marked as stale.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[Nerwyn]

This issue is still present in the latest version of Home Assistant frontend 20250109.2. It should not be marked as stale.

[DerOetzi]

Stil an issue

[DerOetzi]

I think the problem is coming from a wrong calculation of height in this css class:

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

[DerOetzi]

with card_mod I changed style of tile card with four feature lines:

:host {
    height: auto !important;
}

As you can see at the screenshot, the card itself, has the correct height then, but the surrounding div with fit-rows style class has still the wrong height causing a gap to the next card. especially on mobile very unsmooth looking

[DerOetzi]

As you can see in the screenshots the fit-rows class calculate with an row-height of 56px and a row-gap of 8 px which are 64px for every row.

But features height is set to 42px and spacing of 12 px which are only 54px per feature. so fit-rows class is calculating 10px to much per feature or feature has the wrong height. Don't know what way is correct to fix the problem

[DerOetzi]

card_mod:
  style:
    hui-card-features$: |
      :host {
        gap: 8px !important;
      }
      
      hui-card-feature {
        height: 56px !important;
      }

"Fixes the problem but cards become really huge then.

[DerOetzi]

I think I have found a final solution doing a short investigation through the frontend code. But I don't have the time to get further into frontend code. To implement it by myself into the visual editor part.

Basically a new option "Not fit rows" is needed under the layout tap of the editor, Because if I set in code editor grid_options->rows to "auto" everything is fine.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.