card-mod-sidebar-yaml no longer works

[Mariusthvdb]

My Home Assistant version: 2023.4.0b0

My lovelace configuration method (GUI or yaml): YAML

What I am doing:

modding the card-mod-sidebar-yaml

What I expected to happen: (this was before updating to ha 2023.4)

and (see mod under Title)

What happened instead:

before the card-mod update to 3.2.1, with update to 2023.4:

after update to card_mod 3.2.1, HA 2023.4: nothing sticks at all, (including the browser_mod sidebar title change):

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
theme-mods:

  card-mod-sidebar-yaml: |
    .: |

      .menu .title:after {
        content: "{% set count = states('sensor.marquee_alerts')|float(default=0) %}
                  {%- set phrase = 'Alert: '
                     if states('sensor.marquee_alerts')|float(default=0) == 1
                     else 'Alerts:' -%}
                  {{'\A ' + phrase + states('sensor.marquee_alerts') if count > 0 }}";
        white-space: pre;
        font-size: 12px;
        font-weight: bold;
        display: block;
        line-height: 4px;
        color: var(--alert-color);
      }

      a[data-panel='ui-overzicht'] paper-icon-item ha-icon {
          --card-mod-icon: {{'mdi:home-alert' if states('sensor.alerts_notifying')|int(default=0) > 0
                              else 'mdi:home'}};
          color: {{'var(--alert-color)' if states('sensor.alerts_notifying')|int(default=0) > 0
                   else 'green'}};
      }

# End of code

Error messages from the browser console:

---

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]

have to edit the above, as after various restarts and refreshing the frontend, it seems this is the current station after all:

the mod on .menu .title:after does work, and I do see the other mods, but not on the correct spot, calculation of that is incorrect. I now see I missed reporting that in the opening post above, my bad. This is what is done left: calc(var(--app-drawer-width) - 44px); in:

      a[data-panel='ui-familie'] paper-icon-item:after {
              content: "{{states('sensor.family_home')}}";
              left: calc(var(--app-drawer-width) - 44px);
              position: absolute;
              min-width: 20px;
              box-sizing: border-box;
              border-radius: 50%;
              font-weight: 400;
              background-color: {{states('sensor.presence_color')}}; /*var(--accent-color);*/
              line-height: 20px;
              text-align: center;
              padding: 0px 6px;
              color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' else 'ivory'}};
              /*var(--text-accent-color, var(--text-primary-color));*/
              font-size: 14px;
      }

there's more, as HA changed the way they show these notification badges.

note there's a default ,248px now, and, adding that ti the mods like:

left: calc(var(--app-drawer-width, 248px) - 44px);

indeed brings back the notification in the menu column:

however, collapsing the menu, (which previously made our card-mod position the notification nicely centered over the icon) now does no longer work. See the screenshot of inspector, where this is clearly struck, and a new style is applied.

guess this closes that issue, as it is no longer a 'bug' in card-mod... will take it to the community for further exploration