Lock icon shows above all layers and dialogs

[chertvl]

Checklist

• [X] I updated the card to the latest version available
• [X] I cleared the cache of my browser

Describe the bug In 2023.05 something changed in frontend, and now card Lock icon (lock: enabled: true) displays above all layers and windows.

Version of the card Version: 3.5.0

To Reproduce Place card with lock: enabled: true and open any more-info dialog.

    type: custom:button-card
    entity: sensor.home_energy
    lock:
      enabled: true

Screenshots

Expected behavior This has not happened before

[kajmaj]

same here

[DaN66O]

I have the same problem

[nima-1102]

Same Problem

Home Assistant 2023.5.2 Supervisor 2023.04.1 Operating System 10.1 Frontend 20230503.3 - latest Button Card: 3.5.0

[Opontios]

Я тоже недавно заметил. Проявляется даже в наглухо затемненных задних планах.

[ASNNetworks]

People, don't reply with 'same', the clutter doesn't help anything and EVERYONE using latest HA and custom button-card has this issue, since it has to do with the frontend changes to how it uses z-index. Just hit like on the first comment to show support and hopefully it will be prioritized.

[ktownsend-personal]

I found that the dialog CSS was expecting 2 variables that weren't in my theme file. I'm guessing they are newly introduced variables. I added them to my theme with a high z-index to ensure the dialog is well above my dashboard.

      dialog-z-index: 100
      mdc-dialog-z-index: 100

The first one is what fixed it, but both were missing.

[kajmaj]

Thanks for hint @ktownsend-personal. It solved the issue, at least partially. Locks are still visible behind the "three dot menu" and it is even possible to click them.

https://github.com/custom-cards/button-card/assets/37018655/ef07ac7f-4ed3-49ee-a10d-54003c1cc068

[fotis3d]

Unfortunately the below did not help me.

 dialog-z-index: 100
  mdc-dialog-z-index: 100

I still got it. Even with my theme after adding those line or with the default theme.

Any luck anyone ?

[Opontios]

Unfortunately the below did not help me.

 dialog-z-index: 100
  mdc-dialog-z-index: 100

I still got it. Even with my theme after adding those line or with the default theme.

Any luck anyone ?

These lines fix the issue but not in all dialog windows, in the "more info" dialog for example it's ok, you can check it.

[Dehumanizer77]

I found that the dialog CSS was expecting 2 variables that weren't in my theme file. I'm guessing they are newly introduced variables. I added them to my theme with a high z-index to ensure the dialog is well above my dashboard.

      dialog-z-index: 100
      mdc-dialog-z-index: 100

The first one is what fixed it, but both were missing.

Where exactly should I add these?

[ASNNetworks]

Thank you! This was an easy fix, I made sure to put my sticky cards at 99, so the popup goes over the sticky cards, and the sticky cards now go over the locks again :)

[github-actions[bot]]

:tada: This issue has been resolved in version 4.0.0-dev.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[kajmaj]

@RomRider Thanks for your work. Nonetheless, the issue has been resolved partially only. As I reported here remained :(

[RomRider]

It doesn't do that on my side. Maybe a caching issue on your side?

[kajmaj]

Installed v4.0.0-dev.5 I´ve tested - HA restart, cache clearing, page reload, various browsers, Companion app included, different devices, different themes (modified/ not modified) Modified I mean by this On not modified themes are locks over all layers everywhere, on modified over hamburger menu only, if I remove modification, locks are over all layers again.

[kajmaj]

Ups, solved. The only thing I haven´t tried - restart the system so I did and suddenly it works !! Thank you again for your work 👍

[github-actions[bot]]

:tada: This issue has been resolved in version 4.0.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: