Safe area: dialogs

[timmo001]

Breaking change

Proposed change

Part of continuation of #25566

Applies safe-area insets to dialogs and more-info components, ensuring content doesn't get clipped on devices with display cutouts while maintaining desktop appearance.

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 #
• This PR is related to issue or discussion: Safe areas #26818
• 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

[timmo001]

With app insets manually set in main.globals.ts:

    --app-safe-area-inset-top: 64px;
    --app-safe-area-inset-bottom: 32px;
    --app-safe-area-inset-left: 8px;
    --app-safe-area-inset-right: 8px;

[timmo001]

Need to look into other types of dialogs, this one appears to go off screen

[timmo001]

Now acting much nicer:

[MindFreeze]

I get why min-height and max-height are inside @media but I think the margins should be outside. There may be tablets or other large screen devices with safe area insets

[timmo001]

Fixed using min-width for container instead, and using padding for top and bottom.

Also fixed two lit-virtualizer height issues

[timmo001]

I think this may be causing double safe areas now as other components set --mdc-dialog-min-width themselves using left and right safe areas.

The best way to solve this would be to remove the calculations from the other components and only do this once in ha-dialog