Improve dismissing dialog/screen of lights, etc.

[notDavid]

Hi there,

Please see the attached screenshot, currently you have to click the tiny red cross to close this dialog. It's really hard to reach, especially with a thumb on a (larger) smartphone screen;

In the iOS native Home app controls for example, it's also possible to Tap anywhere in the green areas - that is, not on a control - to close these kind of dialogs.

Please consider also implementing this in HA, as it's a much better UX...!

Thank you!
Best, David.

[marcinbauer85]

Apple has a different UI pattern where dialogs are displayed on top a blured background indicating you can still interact with the background. In MD2 (which is the basis for HA) on mobile the dialog covers the whole screen which doesn't permit this kind of interaction. The closest UI element that could fix this is a MD2 Sheet, although in MD2 implementation of it isn't suited for the amount of information we currently show in the more-info dialog. MD3 implementation of it hints it might be more of a way to go: https://m3.material.io/components/bottom-sheets/guidelines#36f26e35-0765-45a7-a0b8-f0c7c68a380c