Fix ha-wa-dialog fullscreen and make alerts not fullscreen

[timmo001]

Breaking change

Proposed change

Alert dialogs are no longer fullscreen, safe area bounds are set with max-height/width and transformation

Screenshots using safe areas of:

Android (Pixel 10) - Landscape (left)

    --app-safe-area-inset-bottom: 36px;
    --app-safe-area-inset-left: 68px;

Standard wa dialogs:

All safe areas set

    --app-safe-area-inset-top: 64px;
    --app-safe-area-inset-bottom: 36px;
    --app-safe-area-inset-left: 48px;
    --app-safe-area-inset-right: 24px;

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes ha-wa-dialog safe areas on iOS #28193
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

Why the max? safe area can never be negative right?

[timmo001]

I didn't think this either, this is the main potential fix for iOS (will need testing as I only have android or desktop)

From @piitaya :

[piitaya]

I think it's not because of negative margin, Looks like the dialog is push from the bottom (there is a grey bar)

[timmo001]

Ah this makes more sense

[timmo001]

OK reverted.

Reproduced this in android too, it has the same effect on the fullscreen dialog of pushing the header/dialog up with the nav bar

[bramkragten]

Why do we need to translate the dialog? What are we trying to fix here?

[timmo001]

The offset of the dialog, say the safe area is this:

    --app-safe-area-inset-bottom: 36px;
    --app-safe-area-inset-left: 68px;

(this is a pixel 10 in landscape, which is the nav bar + camera bump)

Without the transform, the position will stay centered to the screen and not the safe area. This is fine until the space is limited. This is only the case for alert/confirmation boxes, as the standard dialog will fall into fullscreen with padding

[bramkragten]

But since the position is relative we can simply use top and left to position it? We don't need translate then?

[piitaya]

Also for generic dialog, I feel like this should be aligned :

[piitaya]

Use margin inline start

[Mariusthvdb]

seems not fixed, and still opening full screen in iOS Companion