Vertical stack breaks cards

hmmbob commented 1 week 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 upgrading to 2024.7.0b0, I am having issues with cards in vertical stack: my (default) map card is broken inside the stack, works fine outside

Describe the behavior you expected

A working map card in vertical-stack. This worked fine in 2024.6.

Steps to reproduce the issue

1. 2. 3. ...

What version of Home Assistant Core has the issue?

core-2024.7.0b0

What was the last working version of Home Assistant Core?

core-2024.6.4

In which browser are you experiencing the issue with?

Chrome

Which operating system are you using to run this browser?

Win11

State of relevant entities

No response

Problem-relevant frontend configuration

####################
# Locations        #
####################
path: locations
title: Locatie
icon: mdi:crosshairs-gps
cards:
  - type: vertical-stack
    cards:
      - type: markdown ## Location header
        content: |
          # Location
      - type: custom:mushroom-chips-card
        alignment: justify
        chips:
          - type: entity
            entity: person.bob
            use_entity_picture: true
          - type: entity
            entity: !secret person_mw
            use_entity_picture: true
          - type: entity
            entity: !secret person_puber
            use_entity_picture: true
          - type: entity
            entity: !secret person_mini
            use_entity_picture: true

      - type: map
        entities:
          - person.bob
          - !secret person_mw
          - !secret person_mini
          - !secret person_puber
          - zone.breda
          - zone.cz
          - zone.home
          - zone.mc
          - zone.ploeterklas
          - zone.school
          - zone.school_mini
          - zone.scouting
          - zone.work
          - zone.work_ms

Javascript errors shown in your browser console/inspector

No response

Additional information

Also a custom-card is broken inside the stack, works partially outside the stack:

create-element-base.ts:190 card vertical-stack TypeError: Cannot read properties of undefined (reading 'states')
    at set hass (flower-card.js?2:100:22626)
    at i.value (hui-card.ts:95:13)
    at i.value (hui-card.ts:125:26)
    at i.value (hui-card.ts:35:12)
    at n.value (hui-stack-card.ts:71:13)
    at hui-stack-card.ts:45:28
    at Array.map (<anonymous>)
    at n.value (hui-stack-card.ts:44:32)
    at o (create-element-base.ts:104:11)
    at create-element-base.ts:147:12

hmmbob commented 1 week ago

fwiw, with default HA theme and the below YAML, it still does not load properly with the same errors

####################
# Locations        #
####################
path: locations
title: Locatie
icon: mdi:crosshairs-gps
cards:
  - type: vertical-stack
    cards:
      - type: map
        entities:
          - person.bob
          - !secret person_mw
          - !secret person_mini
          - !secret person_puber
          - zone.breda
          - zone.cz
          - zone.home
          - zone.mc
          - zone.ploeterklas
          - zone.school
          - zone.school_mini
          - zone.scouting
          - zone.work
          - zone.work_ms

alexruffell commented 1 week ago

I believe the same issue exists with horizontal-stack. This horizontal stack of custom-button cards is inside a vertical-stack (my default for all views is 3 vertical stacks if enough cards are present), but the issue persists even if I pull it out on its own.

The buttons are perfectly sized for the icons/sensor readings and the last button that I use as a label fills in the rest of the horizontal space.

Edit: I found an old snapshot of another room:

home-assistant / frontend