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

Nerwyn commented 3 months ago

Checklist

[X] I have updated to the latest available Home Assistant version.
[X] I have cleared the cache of my browser.
[X] 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

Create a sections view (or use an existing one).
Add a tile card and set it's entity to one of a domain with built in features (like climate).
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[bot] commented 3 weeks ago

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 commented 3 weeks ago

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.

home-assistant / frontend