Difference row height with and without horizontal-stack

Revilo91 commented 3 days 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

Since the update 20240702.0 (#21244), the entities cards are displayed larger than in a horizontal stack. In the source code you can find the following:

public getLayoutOptions(): LovelaceLayoutOptions {
    return {
      grid_columns: 2,
      grid_rows: 2,
      grid_min_columns: 2,
      grid_min_rows: 2,
    };
  }

Does this grid_min_rows: 2 have an important meaning or could you set it back to 1? Because you can see that it looks good even at a reduced height.

Describe the behavior you expected

Should looks like the left side of this image:

Steps to reproduce the issue

Code to check:

type: sections
max_columns: 4
title: Test2
path: test2
sections:
  - cards:
      - type: horizontal-stack
        cards:
          - type: entity
            entity: sensor.ebusd_pms_yieldcurrentday_energy
            state_color: true
          - type: entity
            entity: sensor.ebusd_pms_yieldtotal_energy4
            state_color: true
    title: Solarthermie
  - cards:
      - type: entity
        entity: sensor.ebusd_pms_yieldcurrentday_energy
        state_color: true
      - type: entity
        entity: sensor.ebusd_pms_yieldtotal_energy4
        state_color: true
    title: Solarthermie
cards: []

What version of Home Assistant Core has the issue?

core-2024.7.0b9

What was the last working version of Home Assistant Core?

core-2024.7.0b8

In which browser are you experiencing the issue with?

Google Chrome Version 126.0.6478.127 (64-Bit)

Which operating system are you using to run this browser?

Windows 10 / 11

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

piitaya commented 3 days ago

Hi 👋 Some cards aren't well supported (horizontal, vertical, grid stack) in the grid sections yet as it's experimental. They don't fit the grid. Entity card is now migrated and 1 is too small to fit the card design so it's set to 1. (On the left side of your screenshot, the stack card don't fit the grid, that's why the size is between 1 and 2).

You can try by setting grid_min_rows: 1 in your yaml config under the layout_options key to override the default min row of the entity card, it doesn't fit, that's why it's 2.

Revilo91 commented 3 days ago

Hi 👋 First of all, thank you for the quick reply 🙂

Ahhh, I didn't know that you could adjust the minimum value. Yes, you're right, it really doesn't look good if you only set 1... Would it perhaps make sense to adjust the font size? I think the value looks so lost otherwise. Maybe a bit dynamic, since the value can also get bigger?

home-assistant / frontend