[iOS] StatusBarBehavior does not occupy entire notch - fix

[kubaflo]

Description of Change

I've encountered this bug while working with MAUI: https://github.com/dotnet/maui/issues/24972 and it turns out that it is rather an issue that should be linked to this repository.

Basically the status bar is wrong for some screens. I've found this comments here: https://forums.developer.apple.com/forums/thread/662466

It makes sense because when I based the status bar height on the top safe area I have the following result:

Expected	Before	After

Linked Issues

• Fixes #2287

It might also fix this one: https://github.com/dotnet/maui/issues/25435, but I'm not 100% sure if it is a status bar's or MAUI's issue. Maybe even both

PR Checklist

• [x] Has a linked Issue, and the Issue has been approved(bug) or Championed (feature/proposal)
• [ ] Has tests (if omitted, state reason in description)
• [ ] Has samples (if omitted, state reason in description)
• [x] Rebased on top of main at time of PR
• [x] Changes adhere to coding standard

• [ ] Documentation created or updated: https://github.com/MicrosoftDocs/CommunityToolkit/pulls

  Additional information

[brminnick]

The StatusBar overlaps the navigation bar in the After photo.

To help visualize this, I've added a green bar in the photo below that is the same height as the NavigationBar. The green bar is the same height in both the Before and After image.

[kubaflo]

Please link to a bug (or open a new Issue) in our GitHub repo to help us understand + reproduce the problem you are trying to fix.

Please also update edit the title of this PR; Improve status bar does not explain the bug or the proposed solution.

Please ensure the status bar does not overlap the navigation bar

Yea, but it is the iOS's native behaviour. Generally status bar should have the same color as the navigation bar. The only point for customising it is when we don't have a navigation bar. And the current MCT solution would give the following outcome:

[Axemasta]

Please link to a bug (or open a new Issue) in our GitHub repo to help us understand + reproduce the problem you are trying to fix.

This is the issue #2287, Originally I thought it was a maui issue but its not and actually a status bar behaviour issue, since the repro app doesn't apply the padding when not using the behavior

[jfversluis]

Another report of this bug: https://github.com/dotnet/maui/issues/25435

Additionally I also ran into this myself while working on the https://github.com/jfversluis/blazor-hybrid-workshop

[kubaflo]

Hi! Any update concerning this PR?

[pictos]

@brminnick what do you think about @kubaflo's answer?

[brminnick]

This is a tough one. Both the Community Toolkit and .NET MAUI are correctly using SafeAreaInserts. This appears to be how iOS has designed their operating system UI.

I've searched Apple's Human Interface Design Guidelines to learn more about their recommendations around the status bar and modality, but they don't provide any specific instructions.

Since this "bug" only seems to affect Modal Pages, my recommendation is to use PageSheet for modal all modal pages on iOS. I've provided the code here: https://github.com/CommunityToolkit/Maui/issues/2287#issuecomment-2448308553

My vote is to close both this PR and the Issue as this is the design that Apple is pushing us developers into.

[brminnick]

Hi! Any update concerning this PR?

To answer @kubaflo's question, we are blocked from merging any PRs until we are able to merge our .NET 9 PR which is currently blocked by a bug in .NET MAUI.

Once the MAUI engineering team resolves this bug, we will be unblocked and can resume merging PRs for the Community Toolkit: https://github.com/dotnet/maui/issues/25871

[kubaflo]

Okay, @brminnick do whatever you think is the best :) But I don't think it happens only on modal pages, it happens on pages without a navigation bar