Card Mod Applying CSS to HA visibility tab in visual editor due to it being a "ha-card"

[MichaelMKKelly]

Noticed this since 2024.9 and also there in 2024.9.1

I have added

card_mod:
  style: |
    ha-card {              
      pointer-events: none;      
    }

to some cards to prevent any interaction.
it appears that the CSS is partially effecting the visual editor and not allowing editing of a condition for visibility. these can still be edited from yaml and still work. its purely a graphical bug of the CSS effecting something it shouldn't.

Config and Layout tabs work fine it seems to be limited to the Visibility tab

I first noticed this with a bubble card however have reproduced it with a few other cards

[ildar170975]

This is not about "pointer-events".
This is about using a standard Entities card (and thus a ha-card component) for a "visibility" section by a HA developer.

type: entities
entities:
  - entity: sun.sun
card_mod:
  style: |
    ha-card {
      background-color: red;
    }

Suggest you to "turn off" the pointer-events line for a moment if you still want to use UI for configuring the card:

...
-pointer-events: none;
...

BTW, in many cases it is NOT possible since UI-editor does not accept card_mod keyword as "allowed":

so the issue "card-mod is applied for config UI" does not exist )))

[MichaelMKKelly]

I gotcha, I totally understand how and why this happens now. great demonstration with making it red :)

Does seem to be an interesting choice the way they chose to build that part of the UI.

Perhaps it will get reworked in the future and resolve itself.

In the mean time will disable the offending lines using a '-' which is something I learnt. I ended up removing and readding it after I was done testing some stuff before realising I could just slap a '-' in there.

Thanks for the information

[ildar170975]

Actually, any intentional change of some CSS property's name can make it "not working" - a browser simply does not recognize it.

Suggestion:

1. Rename the issue correspondingly to reflect a true behaviour (up to you, actually). In general, this is NOT a card-mod issue since card-mod works AS INTENDED - it is applied to ha-card as expected; the fact that ha-card is misplaced in UI may not be a concern of card-mod...
2. Start monitoring the frontend issue I attached.

[MichaelMKKelly]

yeah that makes sense

I have renamed this issue hopefully more appropriately and will watch the frontend issue for updates.

It makes sense that it was done that way for testing but its just a pain for card mod that that it got rolled out in that setup. hopefully they will rework it to be consistent with the rest of the UI soon.

[ildar170975]

Some more remarks:

1. Seems that changes in Frontend code were made much earlier than 2024.9. I would say - months ago (a more precise date may be named after looking at a history of changes).
2. The current implementation of "visibility" tab affects not only card-mod - it affects frontend themes (i.e. users who do not use card-mod).

[MichaelMKKelly]

Looks Like the HA frontend issue:
home-assistant/frontend#21915
has been closed noting this PR being merged:
home-assistant/frontend#22085

so the fix will probably roll out in 2024.10 next week and hopefully resolve the issue.

[ildar170975]

Seems to be fixed in 2024.10

[MichaelMKKelly]

Fixed in 2024.10 thanks to home-assistant/frontend#22085