Description

I've created a new MAUI project for .NET RC2 with the default VS template. It's displayed correctly in the portrait mode. However, the same app doesn't look correct in the landscape mode. With the closed flyout menu, the app looks a bit ugly but at least the UI doesn't collide with any of the system elements. However, when the flyout menu is opened, it starts on the left edge of the screen and there is no padding for the safe area, so the items in the flyout menu collide with the display notch and a part of them can be covered by it. Moreover the top system statusbar also collides with the opened flyout menu. You can see both in the following screenshot. You can see a black hole in the middle of the flyout menu cutting out a part of the icon for "Another page". If you look very closely, you can also see white system icons (time, SD card and so on] drawn over the top of the first "Dashboard" flyout menu item. It's subtle because the system icons are white and the MAUI flyout menu background is also very light. It can be seen better in the emulator in the full resolution.

.NET 10 RC2:

.NET 9.0.120 for comparison:

You can see from the images that .NET 9 don't have this problem. Both the page content and the flyout menu respect the system insets on the left part of the screen.

By the way, you can also look at the appearance of the MAUI app with the flyout menu closed. It doesn't look very nice. The system status bar color is not only on the top but also partially on the left part of the MAUI app next to the hamburger menu button. I've set the system status bar color to red to distinguish easily what is the status bar and what is the MAUI app.

.NET 10 RC2:

.NET 9.0.120 for comparison:

I think that the problem is more general and the core issue is that SafeAreaEdges can be set only for ContentPage and some of its elements but not for the Shell and it's components (or I just haven't found it in the documentation). Therefore in Shell, the top SafeAreaEdge for the portrait mode and the left SafeAreaEdge for the landscape mode have no effect and a Shell app cannot be set to be in the full edge-to-edge mode. The hamburger menu button and other content are always below the system status bar regardless of the SafeAreaEdges setting (as it was set to All for the top / left edge). On the other hand, opened flyout menu behaves completely differently in the landscape mode and it ignores system insets (as if SafeAreaEdges was set to None). Besides this incosistency, tt would be really great if the developer could customize the SafeAreaEdges also for the Shell and it's elements, (opened flyout menu, the hamburger menu button and so on). Maybe I just missed something but I haven't found such option anywhere.

Steps to Reproduce

1. Try the app at https://github.com/holecekp/MauiBugSafeAreaEdgesInShell. It's just a a new MAUI .NET 10 app created by VS Insiders using the default VS template (I've just added a few more flyout menu items and changed primary color for the status bar to red to make things better visible).
2. Run the app in Android 15 emulator.
3. Rotate the screen to the landscape mode and check how the app is displayed.
4. You can compare it with .NET 9 version at https://github.com/holecekp/MauiBugSafeAreaEdgesInShell/tree/net9)

Link to public reproduction project repository

https://github.com/holecekp/MauiBugSafeAreaEdgesInShell

Version with bug

10.0.0-rc.2

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

9.0.120 SR12

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 15 emulator

Did you find any workaround?

No

Relevant log output