Card height no longer respected after updating to 2024.11.0b0

alexruffell commented 1 day 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.
[X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Height of type: custom:button-card set to 100% is no longer respected. If I set it in px it works but doing so causes issues when viewing dashboard on different devices. The two tiny buttons should fill in the vertical space beneath them as they did in 2024.10.4 and prior versions. This issue (or very similar one) also happened one or two months ago and was resolved quickly upon reporting by @piitaya but I forget the issue#.

Describe the behavior you expected

Buttons fill available space showing their icon and title as all the other buttons in the snapshot above.

Steps to reproduce the issue

YAML below is for the entire column. Using this YAML the problem will be visible.

What version of Home Assistant Core has the issue?

2024.11.0b1

What was the last working version of Home Assistant Core?

2024.10.4

In which browser are you experiencing the issue with?

Google 130.0.6723.70 (Official Build) (64-bit)

Which operating system are you using to run this browser?

Windows 11

State of relevant entities

No response

Problem-relevant frontend configuration

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/entrance
            name: Entrance
            show_icon: true
            icon: mdi:door-open
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/kitchen
            name: Kitchen
            show_icon: true
            icon: mdi:stove
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/living-room
            name: Living<br/>Room
            show_icon: true
            icon: mdi:sofa-outline
            layout: icon_name
      - type: custom:button-card
        entity: binary_sensor.front_door
        name: Front<br/>Door
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        icon: |
          [[[
            if (states["lock.front_door_lock"].state == "unavailable") return "mdi:alert-circle-outline";
            else if (states["binary_sensor.front_door"].state == "on") return "mdi:door-open";
            else if (states["lock.front_door_lock"].state == "locked") return "mdi:door-closed-lock";
            else return "mdi:door-closed";
          ]]] 
        state:
          - value: "on"
            styles:
              icon:
                - color: red
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            styles:
              icon:
                - color: |
                    [[[
                      if (states["lock.front_door_lock"].state == "unlocked") return "red";
                      if (states["lock.front_door_lock"].state == "unavailable") return "gray";
                      else return "var(--paper-item-icon-color)";
                    ]]] 
        tap_action:
          action: call-service
          service: lock.lock
          service_data:
            entity_id: lock.front_door_lock
        hold_action:
          action: call-service
          service: lock.unlock
          service_data:
            entity_id: lock.front_door_lock
        show_icon: true
        show_state: false
      - type: custom:button-card
        entity: binary_sensor.patio_door
        name: Patio<br/>Door
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        icon: |
          [[[
            if (states["lock.patio_door_lock"].state == "unavailable") return "mdi:alert-circle-outline";
            else if (states["binary_sensor.patio_door"].state == "on") return "mdi:door-open";
            else if (states["lock.patio_door_lock"].state == "locked") return "mdi:door-closed-lock";
            else return "mdi:door-closed";
          ]]] 
        state:
          - value: "on"
            styles:
              icon:
                - color: red
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            styles:
              icon:
                - color: |
                    [[[
                      if (states["lock.patio_door_lock"].state == "unlocked") return "red";
                      if (states["lock.patio_door_lock"].state == "unavailable") return "gray";
                      else return "var(--paper-item-icon-color)";
                    ]]]
        tap_action:
          action: call-service
          service: lock.lock
          service_data:
            entity_id: lock.patio_door_lock
        hold_action:
          action: call-service
          service: lock.unlock
          service_data:
            entity_id: lock.patio_door_lock
        show_icon: true
        show_state: false
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/master-suite
            name: Master<br/>Suite
            show_icon: true
            icon: mdi:bed-king-outline
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/powder-room
            name: Powder<br/>Room
            show_icon: true
            icon: mdi:toilet
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/study
            name: Study
            show_icon: true
            icon: mdi:desk-lamp
            layout: icon_name
      - type: custom:button-card
        entity: binary_sensor.garage_door
        name: Garage<br/>Door
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        icon: |
          [[[
            if (states["lock.garage_door_lock"].state == "unavailable") return "mdi:alert-circle-outline";
            else if (states["binary_sensor.garage_door"].state == "on") return "mdi:door-open";
            else if (states["lock.garage_door_lock"].state == "locked") return "mdi:door-closed-lock";
            else return "mdi:door-closed";
          ]]] 
        state:
          - value: "on"
            styles:
              icon:
                - color: red
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            styles:
              icon:
                - color: |
                    [[[
                      if (states["lock.garage_door_lock"].state == "unavailable") return "gray";
                      else if (states["lock.garage_door_lock"].state == "unlocked") return "red";
                      else return "var(--paper-item-icon-color)";
                    ]]] 
        tap_action:
          action: call-service
          service: lock.lock
          service_data:
            entity_id: lock.garage_door_lock
        hold_action:
          action: call-service
          service: lock.unlock
          service_data:
            entity_id: lock.garage_door_lock
        show_icon: true
        show_state: false
      - type: custom:button-card
        entity: binary_sensor.backyard_gate_sensor
        name: Backyard<br/>Gate
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
          icon:
            - color: var(--paper-item-icon-color)
        state:
          - value: "on"
            styles:
              icon:
                - color: red
                - animation:
                    - blink 2s linear infinite
          - value: "off"
        tap_action:
          action: more-info
        show_icon: true
        show_state: false
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/utility-room
            name: Utility<br/>Room
            show_icon: true
            icon: mdi:washing-machine
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/game-room
            name: Game<br/>Room
            show_icon: true
            icon: mdi:gamepad-variant-outline
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/upstairs-bathroom
            name: Upstairs<br/>Bathroom
            show_icon: true
            icon: mdi:shower
            layout: icon_name
      - type: custom:button-card
        entity: cover.overhead_garage_door
        name: Overhead<br/>Garage Door
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
          icon:
            - color: var(--paper-item-icon-color)
        state:
          - value: open
            icon: mdi:garage-open-variant
            styles:
              icon:
                - color: red
                - animation:
                    - blink 2s linear infinite
          - value: closed
            icon: mdi:garage-variant
          - value: unavailable
            icon: mdi:garage-alert-variant
        tap_action:
          action: more-info
        show_icon: true
        show_state: false
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: cover.overhead_garage_door
            name: Open
            icon: mdi:garage-open-variant
            show_icon: true
            show_state: false
            styles:
              card:
                - height: 100%
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - letter-spacing: 1px
                - padding-bottom: 5px
              icon:
                - color: var(--paper-item-icon-color)
            state:
              - value: unavailable
                icon: mdi:garage-alert-variant
            tap_action:
              action: none
            hold_action:
              action: call-service
              service: cover.open_cover
              service_data:
                entity_id: cover.overhead_garage_door
          - type: custom:button-card
            entity: cover.overhead_garage_door
            name: Close
            icon: mdi:garage-variant
            show_icon: true
            show_state: false
            styles:
              card:
                - height: 100%
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - letter-spacing: 1px
                - padding-bottom: 5px
              icon:
                - color: var(--paper-item-icon-color)
            state:
              - value: unavailable
                icon: mdi:garage-alert-variant
            tap_action:
              action: none
            hold_action:
              action: call-service
              service: cover.close_cover
              service_data:
                entity_id: cover.overhead_garage_door
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/office
            name: Office
            show_icon: true
            icon: mdi:desk
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/kids-bedroom
            name: Kids<br/>Bedroom
            show_icon: true
            icon: mdi:bunk-bed-outline
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/media-room
            name: Media<br/>Room
            show_icon: true
            icon: mdi:projector
            layout: icon_name
      - type: custom:button-card
        entity: input_boolean.home_secured
        name: Home<br/>Secured
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        state:
          - value: "on"
            color: var(--paper-item-icon-color)
            icon: mdi:home-outline
          - value: "off"
            color: red
            icon: mdi:home-alert-outline
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
        tap_action:
          action: navigate
          navigation_path: /lovelace-safety/intrusion
        show_icon: true
        show_state: false
      - type: custom:button-card
        entity: input_boolean.intrusion_alerts
        name: Intrusion<br/>Alerts
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        state:
          - value: "on"
            color: red
            icon: mdi:shield-alert-outline
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            icon: mdi:shield-home-outline
        tap_action:
          action: navigate
          navigation_path: /lovelace-safety/intrusion
        hold_action:
          action: navigate
          navigation_path: /lovelace-safety/intrusion
        show_icon: true
        show_state: false
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/guest-bedroom
            name: Guest<br/>Bedroom
            show_icon: true
            icon: mdi:bed-outline
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/garage
            name: Garage
            show_icon: true
            icon: mdi:garage-variant
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/outdoors
            name: Outdoors
            show_icon: true
            icon: mdi:pine-tree
            layout: icon_name
      - type: custom:button-card
        entity: input_boolean.water_alerts
        name: Water<br/>Alerts
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        tap_action:
          action: navigate
          navigation_path: /lovelace-safety/water
        hold_action:
          action: navigate
          navigation_path: /lovelace-safety/water
        show_icon: true
        show_state: false
        show_entity_picture: true
        state:
          - value: "on"
            color: red
            icon: mdi:water-alert-outline
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            icon: mdi:water-outline
      - type: custom:button-card
        entity: input_boolean.smoke_alarm
        name: Fire<br/>Alarm
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        state:
          - value: "on"
            color: red
            icon: mdi:skull-crossbones-outline
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            icon: mdi:fire
        tap_action:
          action: navigate
          navigation_path: /lovelace-safety/fire
        show_icon: true
        show_state: false
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/attic
            name: Attic
            show_icon: true
            icon: mdi:home-roof
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace-safety/
            name: Safety
            show_icon: true
            icon: mdi:shield-home-outline
            layout: icon_name
          - type: custom:button-card
            styles:
              card: null
              name:
                - text-transform: uppercase
                - font-size: 10px
                - font-weight: normal
                - justify-self: center
                - margin-left: "-25px"
                - letter-spacing: 2px
              icon:
                - color: var(--paper-item-icon-color)
                - height: 25px
                - width: 25x
                - padding: 0px 20px 0px 0px
            tap_action:
              action: navigate
              navigation_path: /lovelace/it
            name: IT
            show_icon: true
            icon: mdi:server-network
            layout: icon_name
      - type: custom:button-card
        entity: input_boolean.maintenance_alerts
        name: Maintenance<br/>Alerts
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        tap_action:
          action: navigate
          navigation_path: /lovelace-maintenance/0
        hold_action:
          action: navigate
          navigation_path: /lovelace-maintenance/0
        show_icon: true
        show_state: false
        show_entity_picture: true
        state:
          - value: "on"
            color: red
            icon: mdi:hammer-wrench
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            icon: mdi:hammer-wrench
      - type: custom:button-card
        entity: input_boolean.weather_alerts
        name: Weather<br/>Alerts
        styles:
          card:
            - height: 100%
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 1px
            - padding-bottom: 5px
        icon: |
          [[[
            if (states["sensor.nws_alerts"].state == "unavailable") return "mdi:weather-cloudy";
            else if (states["input_boolean.weather_alerts"].state == "on") return "mdi:weather-cloudy-alert";
            else if (states["input_boolean.weather_alerts"].state == "off") return "mdi:weather-cloudy";
            else return "mdi:door-closed";
          ]]] 
        state:
          - value: "on"
            color: red
            styles:
              icon:
                - animation:
                    - blink 2s linear infinite
          - value: "off"
            styles:
              icon:
                - color: |
                    [[[
                      if (states["input_boolean.weather_alerts"].state == "on") return "red";
                      if (states["sensor.nws_alerts"].state == "unavailable") return "gray";
                      else return "var(--paper-item-icon-color)";
                    ]]]
        tap_action:
          action: navigate
          navigation_path: /lovelace-safety/weather
        hold_action:
          action: more-info
        show_name: true
        show_icon: true
        show_state: false
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.home_mode
        styles:
          card: null
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 2px
            - padding: 5px 0px 5px 0px
          icon:
            - color: var(--paper-item-icon-color)
            - height: 25px
            - width: 25x
            - padding: 0px 0px 5px 0px
          state:
            - text-transform: uppercase
            - font-size: 10px
            - padding: 5px 0px 5px 0px
          grid:
            - grid-template-areas: "\"n\" \"i\" \"s\" \"l\""
        state:
          - value: Morning
            icon: mdi:weather-sunset-up
          - value: Day
            icon: mdi:weather-sunny
          - value: Evening
            icon: mdi:weather-sunset-down
          - value: Night
            icon: mdi:weather-night
          - value: Away
            icon: mdi:airplane
        tap_action:
          action: none
        name: Home Mode
        show_icon: true
        show_name: true
        show_state: true
        layout: vertical
      - type: custom:button-card
        entity: input_boolean.quiet_mode
        styles:
          card: null
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 2px
            - padding: 5px 0px 5px 0px
          icon:
            - color: var(--paper-item-icon-color)
            - height: 25px
            - width: 25x
            - padding: 0px 0px 5px 0px
          state:
            - text-transform: uppercase
            - font-size: 10px
            - padding: 5px 0px 5px 0px
          grid:
            - grid-template-areas: "\"n\" \"i\" \"s\" \"l\""
        state:
          - value: "off"
            color: red
            icon: mdi:volume-high
          - value: "on"
            icon: mdi:volume-low
        tap_action:
          action: none
        hold_action:
          action: call-service
          service: input_boolean.toggle
          service_data:
            entity_id: input_boolean.quiet_mode
        name: Quiet Mode
        show_icon: true
        show_name: true
        show_state: true
        layout: vertical
      - type: custom:button-card
        entity: sensor.people_mode
        styles:
          card: null
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 2px
            - padding: 5px 0px 5px 0px
          icon:
            - color: var(--paper-item-icon-color)
            - height: 25px
            - width: 25x
            - padding: 0px 0px 5px 0px
          state:
            - text-transform: uppercase
            - font-size: 10px
            - padding: 5px 0px 5px 0px
          grid:
            - grid-template-areas: "\"n\" \"i\" \"s\" \"l\""
        state:
          - value: Awake
            color: red
            icon: mdi:sleep-off
          - value: Sleeping
            icon: mdi:sleep
        tap_action:
          action: none
        hold_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.people_mode
        name: People Mode
        show_icon: true
        show_name: true
        show_state: true
        layout: vertical
      - type: custom:button-card
        entity: sensor.kids_mode
        styles:
          card: null
          name:
            - text-transform: uppercase
            - font-size: 10px
            - font-weight: normal
            - justify-self: center
            - letter-spacing: 2px
            - padding: 5px 0px 5px 0px
          icon:
            - color: var(--paper-item-icon-color)
            - height: 25px
            - width: 25x
            - padding: 0px 0px 5px 0px
          state:
            - text-transform: uppercase
            - font-size: 10px
            - padding: 5px 0px 5px 0px
          grid:
            - grid-template-areas: "\"n\" \"i\" \"s\" \"l\""
        state:
          - value: Awake
            color: red
            icon: mdi:sleep-off
          - value: Sleeping
            icon: mdi:sleep
        tap_action:
          action: none
        hold_action:
          action: call-service
          service: input_select.select_next
          service_data:
            entity_id: input_select.kids_mode
        name: Kids Mode
        show_icon: true
        show_name: true
        show_state: true
        layout: vertical
  - type: custom:button-card
    styles:
      card:
        - height: 40px
      name:
        - text-transform: uppercase
        - font-size: 10px
        - font-weight: normal
        - justify-self: center
        - letter-spacing: 2px
    tap_action:
      action: navigate
      navigation_path: /lovelace/thermostats
    name: Thermostats Dashboard
    show_icon: false
    layout: name_state
  - type: horizontal-stack
    cards:
      - features:
          - type: target-temperature
          - style: dropdown
            type: climate-preset-modes
            preset_modes:
              - home
              - away
              - sleep
              - away_indefinitely
          - style: icons
            type: climate-hvac-modes
          - type: climate-fan-modes
            style: dropdown
        type: tile
        entity: climate.downstairs_thermostat
        vertical: true
        name: Downstairs
        show_entity_picture: false
        icon: mdi:home-thermometer-outline
        hide_state: false
      - features:
          - type: target-temperature
          - type: climate-preset-modes
            style: dropdown
          - type: climate-hvac-modes
          - type: climate-fan-modes
            style: dropdown
        type: tile
        entity: climate.upstairs_thermostat
        vertical: true
        name: Upstairs
        show_entity_picture: false
        icon: mdi:home-thermometer-outline
        hide_state: false



### Javascript errors shown in your browser console/inspector

_No response_

### Additional information

_No response_

piitaya commented 1 day ago

It seems to be related to this PR : https://github.com/home-assistant/frontend/pull/22593

ildar170975 commented 1 day ago

@alexruffell Can you provide a short example demonstrating this issue with STOCK cards?

piitaya commented 1 day ago

It think it's because most of stock cards have 100% height for the root element while custom button card doesn't.

ildar170975 commented 1 day ago

Then this related to a custom card & should be fixed/styled on a custom card's side.

alexruffell commented 1 day ago

@ildar170975 How can you be certain it is not a bug introduced in the frontend given the change happened with the latest core beta? I guess the button-card developer could determine that and then file an issue with frontend but is that the best approach?

Also, @piitaya found and fixed what I believe to be the same exact issue just a few versions (beta) back. I therefore assumed it was the same issue popping up again.

What I really need to do, is see if I can move back to the stock card on as many of these buttons as possible to avoid the added complications but I recall I chose to use this card on dozens of my views because it was significantly more flexible in its customization (time to revisit!).

ildar170975 commented 1 day ago

@piitaya

most of stock cards have 100% height for the root element

I think we should do smth else than simply removing height: 100% from horiz stack. Check this example with stock cards:

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: entity
        entity: sun.sun
      - type: entity
        entity: sun.sun
      - type: entity
        entity: sun.sun
  - type: entity
    entity: sun.sun
  - type: horizontal-stack
    cards:
      - type: entity
        entity: sun.sun
      - type: entity
        entity: sun.sun

which gives this w/o height: 100%: Here the 2nd horiz stack does not occupy whole available area.

But before the fix it looked not better ))):

The initial goal of removing height: 100% was to fix this nonsense:

ildar170975 commented 1 day ago

Proposed to revert changes made in https://github.com/home-assistant/frontend/pull/22593. This fix eliminated some bugs - but added a new one. We need to find a different way.

piitaya commented 1 day ago

@ildar170975 Are you using panel view for your examples?

ildar170975 commented 1 day ago

Are you using panel view for your examples?

Ofc, this seems to happen in Panel only.

ildar170975 commented 1 day ago

@piitaya Can we use this?

        #root {
          height: var(--horizontal-stack-card-height, auto);
          ...
        }
        #root hui-horizontal-stack-card {
          --horizontal-stack-card-height: 100%;
        }

If a stack is used inside another horizontal stack - height: 100%.

piitaya commented 1 day ago

By design the panel will take 100% height. It's not only a problem with horizontal stack. If you put any card it will take 100% of the height.

ildar170975 commented 1 day ago

If you put any card it will take 100% of the height.

Yes, any card (which is not a stack) takes 100% in a panel mode. But if a horiz stack takes 100% - it may cause this: 381332912-d578ac15-c2e8-47ed-9c10-f0d371b1b44b

or this (look at the left vert stack): 382093344-57d564d3-6dde-40c9-af91-3340160ba5ff

So, my proposal is to NOT allow occupying 100% for horiz stack - and only allow it if a horiz stack is placed inside another horiz stack.

But imho ideally would be adding smth like ha-card for stack cards - currently height: 100% is set to dev#root and in case of a presence of a header will cause issues like this:

when div#root overflows above a header.

home-assistant / frontend