Doing it wrong, but there's no other way? Mod-card on hui-element with core graph/markdown card

[Mariusthvdb]

My Home Assistant version: 2021.11.5

My lovelace configuration method (GUI or yaml):

Yaml

What I am doing:

using a mod-card on a custom:hui-element for history-graph

What I expected to happen:

no error?

What happened instead:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
  - type: custom:fold-entity-row
    head:
     type: section
     label: Graphs
    padding: 0
    entities:
      - type: custom:mod-card
        card_mod: &mod
          style: |
            ha-card {
              margin: 0px -16px 0px -16px;
            }
        card:
          type: custom:hui-element
          card_type: history-graph
          entities:
            - entity: sensor.co2_living_statistics
              name: Co2
            - entity: sensor.temp_living_statistics
              name: Temp Living
            - entity: sensor.humid_living_statistics
              name: Vocht
            - entity: sensor.schimmel_sensor
              name: Schimmel

      - type: custom:mod-card
        card_mod: *mod
        card:
          type: custom:hui-element
          card_type: statistics-graph
          entities:
            - entity: sensor.co2_living_statistics
              name: Co2
            - entity: sensor.temp_living_statistics
              name: Temp Living
            - entity: sensor.humid_living_statistics
              name: Vocht
# End of code

I understand the error (getting it because I use mod-card to encapsulate hui-elelement) but, but if I dont do that, and use the preferred method:

      - type: custom:hui-element
        card_type: statistics-graph
        card_mod: *mod
        entities:
          - entity: sensor.co2_living_statistics
            name: Co2
          - entity: sensor.temp_living_statistics
            name: Temp Living
          - entity: sensor.humid_living_statistics
            name: Vocht

to widen the graph and lose the margins, the card shows fine only directly after the refresh, but overflows the outer card margins after a reload of that same page. This is consistent throughout the config on all core graphs cards.

Using the mod-card fixes it perfectly:

Error messages from the browser console:

[Info] You are doing it wrong! (card-mod.js, line 6)
[Info] mod-card should NEVER be used with a card that already has a ha-card element, such as hui-element (card-mod.js, line 6)

By putting an X in the boxes ([]) 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.

[Mariusthvdb]

deleted post above, because no longer an issue on that specific config

[Mariusthvdb]

closing, made a few edits and the cards now remain within their outer boundaries.

adding the specific card type to the offending section ha-card.type-history-graph:

  - type: custom:hui-element
    card_type: history-graph
    card_mod:
      style: |
        ha-card.type-history-graph {
          background: {{'green' if is_state('binary_sensor.family_home','on')
                         else '#636B75'}};
          --secondary-text-color: {{'gold' if is_state('binary_sensor.family_home','on')
                           else 'black'}};
          box-shadow: none;
          margin: 0px -16px -16px -16px;
        }