Conflict with 'custom:state-switch': Content extends card width with custom:auto-entities since 20.0.5

bcutter commented 2 years ago

My Home Assistant version: 2021.10.6

Fold-entity-row version (FROM BROWSER CONSOLE): 20.0.9

What I am doing: Expand a fold-entity-row containing custom:auto-entities where some of them have a lot of text

What I expected to happen: The text is cut (This is a very long te... instead of This is a very long text text text text text text) and whole card width is respected

What happened instead: Text and status/toggle elements are positioned outside the actual ha-card

Minimal steps to reproduce:

type: custom:state-switch
entity: input_boolean.gui_global_details
default: ''
transition: none
states:
  'on':
    type: entities
    title: 🤖 Automatisierungen
    state_color: true
    show_header_toggle: false
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          title: ''
          state_color: false
          show_header_toggle: false
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -20px;
                  margin-bottom: -20px;
                  box-shadow: none;
                }
        entities: []
        filter:
          include:
            - domain: automation
              options:
                secondary_info: last-triggered
          exclude:
            - attributes:
                last_triggered: null
        show_empty: false
        unique: false
        sort:
          method: last_triggered
          reverse: true
          count: 5
      - type: custom:fold-entity-row
        head:
          type: section
          label: Weitere anzeigen
        padding: 0
        open: false
        group_config:
          state_color: true
        entities:
          - type: custom:auto-entities
            card:
              type: entities
              title: null
              state_color: false
              show_header_toggle: false
              card_mod:
                style:
                  .: |
                    ha-card {
                      margin-left: -15px;
                      margin-right: -15px;
                      margin-top: -10px;
                      margin-bottom: -15px;
                      box-shadow: none;
                    }
            entities: null
            filter:
              include:
                - domain: automation
                  options:
                    secondary_info: last-triggered
              exclude: null
            show_empty: false
            unique: false
            sort:
              method: last_triggered
              reverse: true
              first: 8
              count: 20
            card_mod:
              style:
                .: |
                  div#items {
                    #margin-top: 5px;
                    #margin-bottom: -25px;
                  }
        card_mod:
          style:
            .: |
              div#head {
                #font-size: 16px;
              }
              ha-icon {
                margin-top: 17px;
              }

Before expanding: grafik

After expanding (notice the right part): grafik

Error messages from the browser console: /

Update: it´s only related to nested custom:fold-entity-row inside a custom:state-switch. But custom:state-switch didn´t change (only fold-entity-row had a bunch of updates during the last days) therefore I´m wondering if this can be fixed here.

By putting an X in the boxes ([X]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

bcutter commented 2 years ago

Any progress / ideas on this @thomasloven ? Maximum card width is not respected. VERY annoying.

This is the minimal thing to check this issue:

Name an automation with a long text

Use this card - which works fine:

type: entities
title: 🤖 Automatisierungen
state_color: true
show_header_toggle: false
entities:
- type: custom:auto-entities
card:
  type: entities
  title: ''
  state_color: false
  show_header_toggle: false
  card_mod:
    style:
      .: |
        ha-card {
          margin-left: -15px;
          margin-right: -15px;
          margin-top: -20px;
          margin-bottom: -20px;
          box-shadow: none;
        }
entities: []
filter:
  include:
    - domain: automation
      options:
        secondary_info: last-triggered
  exclude:
    - attributes:
        last_triggered: null
show_empty: false
unique: false
sort:
  method: last_triggered
  reverse: true
  count: 25

Use this card (auto-entities inside fold-entity-row) - still working:

type: entities
title: 🤖 Automatisierungen
state_color: true
show_header_toggle: false
entities:
- type: custom:fold-entity-row
head:
  type: section
  label: Show more
padding: 0
open: false
group_config:
  state_color: true
entities:
  - type: custom:auto-entities
    card:
      type: entities
      title: ''
      state_color: false
      show_header_toggle: false
      card_mod:
        style:
          .: |
            ha-card {
              margin-left: -15px;
              margin-right: -15px;
              margin-top: -20px;
              margin-bottom: -20px;
              box-shadow: none;
            }
    entities: []
    filter:
      include:
        - domain: automation
          options:
            secondary_info: last-triggered
      exclude:
        - attributes:
            last_triggered: null
    show_empty: false
    unique: false
    sort:
      method: last_triggered
      reverse: true
      count: 25

Use this card (auto-entities inside fold-entity-row inside state-switch) - this time view is broken:

type: custom:state-switch
entity: input_boolean.gui_global_details
default: ''
transition: none
states:
'on':
type: entities
title: 🤖 Automatisierungen
state_color: true
show_header_toggle: false
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: Show more
    padding: 0
    open: false
    group_config:
      state_color: true
    entities:
      - type: custom:auto-entities
        card:
          type: entities
          title: ''
          state_color: false
          show_header_toggle: false
          card_mod:
            style:
              .: |
                ha-card {
                  margin-left: -15px;
                  margin-right: -15px;
                  margin-top: -20px;
                  margin-bottom: -20px;
                  box-shadow: none;
                }
        entities: []
        filter:
          include:
            - domain: automation
              options:
                secondary_info: last-triggered
          exclude:
            - attributes:
                last_triggered: null
        show_empty: false
        unique: false
        sort:
          method: last_triggered
          reverse: true
          count: 25

I was hoping latest state-switch v1.92 update (fixes & updates) improves things, but it did not. All used custom elements are from thomasloven

auto-entities
fold-entity-row
state-switch

...and therefore I'm wondering twice how this poor outcome is possible. Please finally fix this as it renders the combined usage of state-switch with fold-entiy-row (and auto-entities) useless.

thomasloven commented 2 years ago

Thank you! This finally gave me a reliable way (or a way at all) to reproduce a long-standing bug.

This has been fixed in the latest state-switch 1.9.3.

bcutter commented 2 years ago

Great! First tests confirm 1.9.3 finally fixed this. Really great. Thank you so much!

thomasloven / lovelace-fold-entity-row

Conflict with 'custom:state-switch': Content extends card width with custom:auto-entities since 20.0.5 #185