Lovelace creates "empty" column for conditional cards when cards are not shown

[sgofferj]

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.

The problem

In its algorithm for organizing the cards, Lovelace also sometimes creates columns which only contain hidden conditional cards which breaks the layout.

Expected behavior

Lovelace should not create "empty" columns. One possibility would be to append a hidden conditional card to the previous column.

Steps to reproduce

Create a Lovelace dashboard with multiple conditional cards which are hidden.

Environment

• Home Assistant release with the issue: 0.114.1 docker
• Last working Home Assistant release (if known): none
• Browser and browser version: Chrome latest, Firefox latest
• Operating system: Ubuntu 18.04, Windows 10

State of relevant entities

N.a.

Problem-relevant configuration

N.a.

Javascript errors shown in your browser console/inspector

None

Additional information

None

[github-actions[bot]]

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.

[sgofferj]

That seems to still persist in 117.5

[iantrich]

@sgofferj if an issue is open you can assume it still persists. No need to comment as such. Just add a thumbs up to the original issue.

[sgofferj]

I am the reporter of the issue. My comment was in reply to the bot.

[iantrich]

🤦‍♂️ of course. sorry, I'll drink more ☕ now 😄

[github-actions[bot]]

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.

[bkupidura]

It still there.

[github-actions[bot]]

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.

[sgofferj]

Issue is still present in 2021.7.3.

[github-actions[bot]]

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.

[sgofferj]

Issue still present.

[sgofferj]

@spacegaier It might be a lovelace isssue, not specifically a conditional card issue. I see the same problem with the state switch card by Thomas Loven. Somebody reported the same behavior there as a bug and I made a cross-reference to this issue here.

[wormuths]

Same here. I have different conditional cards configured to show for different weather scenarios, and the whole row is eaten by the blank cards that don't currently need to show.

[fikustommy]

I am also bothered by this very frustrating issue. It seems the problem is that Lovelace creates a div column and populates it with hui-conditional-cards and applies style="display: none;" to them, but they are still taking up "space" in the column so that no other items can go there.

I tried using state-switch cards. This works great for replacing a card with another based off conditions, but there's no hiding a card completely because of the Lovelace root issue.

[Bradford1138]

Same with the state-switch card in a grid card. I have made a reddit post if more details can help

[pejotigrek]

I can't believe it, but after all those years [I've found first appearence of this issue in the 2018...] this is still a problem!

no matter what card is used inside [stacks, grids etc.] the whole conditional card still is considered as "I am here, so display me!". this is annoying as hell, especially when the conditional content should "jump" to next column [even without the vertical-stack configured].

the whole right column [highlighted by me in developer's tools in chrome] should be gone, and therefore the left column should be centered

[OmgImAlexis]

I found a "workaround" just trying to find a way I can apply it.

The parent element needs to either not exist or the style that's applied to the child element needs to be removed from the child and applied to the hui-conditional-card.

For example in my case I have multiple button-card elements here. Each in a conditional to only show if they're set to on. If I move the styles from the button-card child to the hui-conditional-card parent it all works.

[FsxShader2012]

Issue still present in HA 2022.4.1

[nicolo-ribaudo]

@FsxShader2012 I understand that this bug is annoying (I am affected by it too), but it's not necessary to comment that "it's still present". If it was fixed, this issue would have obviously been closed. It's still open because it's still present.

[finder39]

I have also found a workaround, but its messy, tweaks a bit when the page is first opened, and requires work for each specific case.

Here is a gif with both the working (top) and non-working examples on top of each other:

And here is that 'tweaking' i was talking about as a page opens or is switched to: State met: State not met:

Here is my code that makes it work:

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🔥'

    - type: custom:mod-card
      card_mod:
        style: |
          :host {
            flex: 0 0 auto !important;
            {%- set sensor = states('binary_sensor.refrigerator_contact') %}
            {%- if sensor != 'on' %}display: none !important
            {%- endif %}
          }
      card:
        type: conditional
        conditions:
          - entity: binary_sensor.refrigerator_contact
            state: 'on'
        card:
          type: 'custom:button-card'
          template: chip_icon_only
          variables:
            ulm_chip_icon_only: '🧊'
          card_mod:
            style: |
              :host {
                width: 100% !important;
                max-width: none !important;
              }

    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🪨'

and here is the code that we expect to work but doesn't:

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🔥'

    - type: conditional
      conditions:
        - entity: binary_sensor.refrigerator_contact
          state: 'on'
      card:
        type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🧊'

    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🪨'

I hope this helps someone, but I also hope we can get to the bottom of this so this isn't necessary anymore

Edit on 6/23/22 BONUS: Do this if you want to be able to wrap the chips when too many show in a row

- type: custom:mod-card
  card_mod:
  style:
    hui-horizontal-stack-card:
      $: |
        div {
          flex-wrap: wrap;
          row-gap: 8px
        }
  card:
    type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🔥'

      - type: custom:mod-card
        card_mod:
          style: |
            :host {
              flex: 0 0 auto !important;
              {%- set sensor = states('binary_sensor.refrigerator_contact') %}
              {%- if sensor != 'on' %}display: none !important
              {%- endif %}
            }
        card:
          type: conditional
          conditions:
            - entity: binary_sensor.refrigerator_contact
              state: 'on'
          card:
            type: 'custom:button-card'
            template: chip_icon_only
            variables:
              ulm_chip_icon_only: '🧊'
            card_mod:
              style: |
                :host {
                  width: 100% !important;
                  max-width: none !important;
                }

      - type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🪨'

[github-actions[bot]]

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.

[rigrig]

Still an issue:

Home Assistant 2022.9.7
Supervisor 2022.09.1 Operating System 9.0 Frontend 20220907.2 - latest Firefox 105.0.1 (64-bit)

[sgofferj]

Can somebody please turn off the stale bot? I wouldn't say that's a minor issue and everybody who posted here will be following the issue and happily close it when it has been corrected. @frenck ?

[s-hutter]

Since this issue never got the attention it deserves in my opinion, I decided to create a post on it for the current "What the heck?" month of October 2022: https://community.home-assistant.io/t/471426 Votes are very much welcome to finally give this old bug more visibility. 🙂

[stalegjelsten]

Hi all! I have also had this problem, but I have found a workaroud that works for me. I use a Lovelace dashboard that I manage through the user interface (no configuration.yaml).

To avoid the empty column I simply put my conditional cards into a grid card. So the hierarchy becomes Grid card → Conditional card → "Card to be displayed".

[cammcnab]

I tried this just now @stalegjelsten and couldn't get it to work… Maybe I'm doing it wrong. The conditional cards still hold a spot (column) even within a grid card.

Did you wrap the entire dashboard in a grid card with multiple columns, or just that one column with a grid card (1 column grid) and the conditionals within that? Thanks in advance

[stalegjelsten]

Hi @cammcnab, I'm sorry but I may have been to quick to celebrate and getting your hopes up. It seems that it works for be because the priority of my newly created grid card is all the way at the bottom. If I "promote" the card by pressing the ↑ arrow while rearranging the cards, the column sometimes goes blank.

I have many different non-conditional cards in my Dashboard. I have grouped all my conditional cards into the grid card with 1 column so that it becomes a vertical stack.

[cammcnab]

@stalegjelsten Ahhh gotcha. Yeah that makes sense. No worries, was just excited for a fix to this!

[sandman98321]

It's bizarre to me that the WTH thread got so many votes, and this has been open so long, but there has never been any dev assignment or interaction about the issue. Is there anything that can be done to at least get some attention?

[mrestorff]

Unfortunately, even the auto-entites card suffers from this issue, as the flexbox options are applied to all cards that don't explicitly overwrite it.

[karwosts]

This appears fixed after #16351. I create three big cards, they create three columns. I put the middle card in conditional and hide it. Now lovelace shows only two columns with no gap.

Closing as fixed, feel free to comment if you still see issues.

[sgofferj]

@karwosts Not fixed.

• Home Assistant 2023.8.4
• Supervisor 2023.08.1
• Operating System 10.5
• Frontend 20230802.1 - latest

[sgofferj]

Also with default HA theme...

[karwosts]

@sgofferj - that "default" theme still looks very heavily modded. Have you tried with stock configuration?

[sgofferj]

Just forgot to hard reload the page after theme change. What is "stock configuration"? This is the default HA theme, unmodified:

[karwosts]

Can you add the full yaml for the minimal dashboard that reproduces this?

Also I still see you have card-mod in the DOM, maybe try removing that as well.

[sgofferj]

  - icon: mdi:remote-tv
    title: Remote
    path: remote
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: '# TV'
            card_mod:
              class: header
          - type: media-control
            entity: media_player.living_room_tv
            card_mod:
              class: middle
          - square: false
            columns: 2
            type: grid
            cards:
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  service_data:
                    source: YouTube
                  target:
                    entity_id: media_player.living_room_tv
                icon: mdi:youtube
                name: YouTube
                hold_action:
                  action: none
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: webostv.command
                  data:
                    entity_id: media_player.living_room_tv
                    command: system.launcher/open
                    payload:
                      target: <redacted>
                  target: {}
                name: Jellyfin
                icon: mdi:shark-fin
                hold_action:
                  action: more-info
                entity: media_player.jellyfin_stefan_s_tv
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: webostv.command
                  data:
                    entity_id: media_player.living_room_tv
                    command: system.launcher/open
                    payload:
                      target: <redacted>
                  target: {}
                name: Garden
                icon: mdi:cctv
                hold_action:
                  action: none
                card_mod:
                  class: button-bullet
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  service_data:
                    source: Photo & Video
                  target:
                    entity_id: media_player.living_room_tv
                name: Media
                icon: mdi:play
                hold_action:
                  action: none
                card_mod:
                  class: button-lozenge
              - type: button
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  service_data:
                    source: Web Browser
                  target:
                    entity_id: media_player.living_room_tv
                name: Browser
                icon: mdi:web
                hold_action:
                  action: none
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: false
                type: button
                tap_action:
                  action: call-service
                  service: media_player.select_source
                  target:
                    entity_id: media_player.living_room_tv
                  data:
                    source: Yle Areena
                name: YLE Areena
                icon: mdi:map
                hold_action:
                  action: none
                card_mod:
                  class: button-lozenge
          - type: media-control
            entity: media_player.jellyfin_stefan_s_tv
            card_mod:
              class: middle
          - type: markdown
            content: '## &nbsp;'
            card_mod:
              class: footer
      - type: vertical-stack
        cards:
          - type: markdown
            content: '# Amplifier'
            card_mod:
              class: header
          - square: false
            columns: 2
            type: grid
            cards:
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: switch.amplifier
                name: Power
                icon: mdi:power
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_vid1
                entity: switch.amp_vid1
                name: VID1
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_vid2
                entity: switch.amp_vid2
                name: VID2
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_vid3
                entity: switch.amp_vid3
                name: VID3
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_cd
                entity: switch.amp_cd
                name: CD
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_dvd
                entity: switch.amp_dvd
                name: DVD
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_vol_dec
                entity: switch.amp_vol_dec
                name: VOL -
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_vol_inc
                entity: switch.amp_vol_inc
                name: VOL +
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_surr
                entity: switch.amp_surr
                name: SURROUND
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_up
                entity: switch.amp_up
                name: Up
                card_mod:
                  class: button-lozenge
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_dn
                entity: switch.amp_dn
                name: Down
                card_mod:
                  class: button-bullet
              - show_name: true
                show_icon: true
                type: button
                tap_action:
                  action: call-service
                  service: switch.turn_on
                  service_data: {}
                  target:
                    entity_id: switch.amp_night
                entity: switch.amp_night
                name: Night
                card_mod:
                  class: button-lozenge
          - type: markdown
            content: '## &nbsp;'
            card_mod:
              class: footer
      - type: conditional
        conditions:
          - entity: media_player.wohnzimmer
            state_not: unavailable
        card:
          type: vertical-stack
          cards:
            - type: markdown
              content: '# Living room player'
              card_mod:
                class: header
            - type: media-control
              entity: media_player.wohnzimmer
              card_mod:
                class: middle
            - type: markdown
              content: '## &nbsp;'
              card_mod:
                class: footer
      - type: conditional
        conditions:
          - entity: media_player.schlafzimmer
            state_not: unavailable
        card:
          type: vertical-stack
          cards:
            - type: markdown
              content: '# Bedroom player'
              card_mod:
                class: header
            - type: media-control
              entity: media_player.schlafzimmer
              card_mod:
                class: middle
            - type: markdown
              content: '## &nbsp;'
              card_mod:
                class: footer
      - type: conditional
        conditions:
          - entity: media_player.player_2
            state_not: unavailable
        card:
          type: vertical-stack
          cards:
            - type: markdown
              content: '# ESP32 player'
              card_mod:
                class: header
            - type: media-control
              entity: media_player.player_2
              card_mod:
                class: middle
            - square: false
              columns: 2
              type: grid
              cards:
                - show_name: true
                  show_icon: true
                  type: button
                  tap_action:
                    action: call-service
                    service: media_player.play_media
                    data:
                      media_content_id: <redacted>
                      media_content_type: news
                      extra:
                        title: KJFK
                    target:
                      entity_id: media_player.player_2
                  name: KJFK
                  icon: mdi:airport
                  card_mod:
                    class: button-bullet
                - show_name: true
                  show_icon: true
                  type: button
                  tap_action:
                    action: call-service
                    service: media_player.play_media
                    data:
                      media_content_id: <redacted>
                      media_content_type: news
                      extra:
                        title: EFJY
                    target:
                      entity_id: media_player.player_2
                  name: EFJY
                  icon: mdi:airport
                  card_mod:
                    class: button-lozenge
                - show_name: true
                  show_icon: true
                  type: button
                  tap_action:
                    action: call-service
                    service: media_player.play_media
                    data:
                      media_content_id: <redacted>
                      media_content_type: news
                      extra:
                        title: EFJY
                    target:
                      entity_id: media_player.player_2
                  name: SWR3
                  icon: mdi:radio
                  card_mod:
                    class: button-bullet
                - show_name: true
                  show_icon: true
                  type: button
                  tap_action:
                    action: call-service
                    service: media_player.play_media
                    data:
                      media_content_id: <redacted>
                      media_content_type: news
                      extra:
                        title: ESSSG
                    target:
                      entity_id: media_player.player_2
                  name: ESSG
                  icon: mdi:airport
                  card_mod:
                    class: button-lozenge
            - type: markdown
              content: '## &nbsp;'
              card_mod:
                class: footer

I'll try removing card mod but it's gonna take a moment. I have a little bit full calendar at the moment.

[karwosts]

I put your yaml in my dashboard and it works as expected, no empty columns.

[jackwilsdon]

I can reproduce the issue in Firefox 117.0 but not Chrome 116.0.5845.141 - it appears that the CSS added in #16351 does not work in Firefox (the :has selector seems unsupported according to https://caniuse.com/css-has).

Here's a minimal dashboard which reproduces the issue:

views:
  - title: Home
    cards:
      - type: markdown
        content: |-
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
      - type: conditional
        card:
          type: markdown
          content: |-
            Long card  
            Long card  
            Long card  
            Long card  
            Long card  
            Long card  
            Long card  
            Long card  
            Long card  
            Long card
        conditions:
          - entity: domain.nonexistent
            state: 'on'
      - type: markdown
        content: |-
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card  
          Long card

It looks like this in Chome:

And this in Firefox:

[karwosts]

I can reproduce the issue in Firefox 117.0 but not Chrome 116.0.5845.141 - it appears that the CSS added in https://github.com/home-assistant/frontend/pull/16351 does not work in Firefox (the :has selector seems unsupported according to https://caniuse.com/css-has).

Good find, it appears you are correct.

Note I maybe don't recommend enabling the has support in firefox, that creates other problems, see #17182.

I will reopen this as OP requested (though I'm not sure if a new firefox-specific issue makes sense instead).

[sgofferj]

@karwosts

Thank you! I noticed a bunch of other problems I have with HA in Firefox which I just haven't gotten around to document properly yet. It seems, FF isn't tested by the HA devs :disappointed:

[github-actions[bot]]

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.

[sgofferj]

Issue persists

[s-hutter]

Under some circumstances, this is also still happening in Chrome. Demo code for an affected dashboard:

views:
  - title: Demo
    cards:
      - type: entities
        entities:
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
      - type: entity-filter
        show_empty: false
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
        state_filter:
          - always_hidden
        card:
          type: entities
      - type: conditional
        conditions:
          - entity: sun.sun
            state: always_hidden
        card:
          type: conditional
          conditions:
            - entity: sun.sun
              state: always_hidden
          card:
            type: entities
            entities:
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
              - entity: sun.sun
      - type: entities
        entities:
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun
          - entity: sun.sun

[github-actions[bot]]

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.

[s-hutter]

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.

Nope, still not fixed...

[jianyu-li]

Still encountering this issue on this side

[mweedon]

The layout-card has a reflow option which helps. But it seems to fill columns before filling rows. I've got a suite of nice looking mushroom cards on conditional show for things like open doors, or dogs needing feeding, etc but in a regular grid most of the screen estate is taken up by empty 'cells'. Totally confused!

[finder39]

https://github.com/home-assistant/frontend/issues/6632#issuecomment-1100768147

As its been 2 years, just linking back to my comment as its still what I use today and still the best solution I've seen out there as a work around.

[github-actions[bot]]

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.