-
Notifications
You must be signed in to change notification settings - Fork 1.8k
[iOS] Shell Flyout Header and Footer not respecting safe area in landscape mode #28379
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
[iOS] Shell Flyout Header and Footer not respecting safe area in landscape mode #28379
Conversation
Hey there @praveenkumarkarunanithi! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
/azp run |
Azure Pipelines successfully started running 3 pipeline(s). |
#elif MACCATALYST | ||
App.EnterFullScreen(); | ||
#endif | ||
VerifyScreenshot(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Snapshot different than baseline: FlyoutShouldRespectSafeAreaInLandscape.png (size differs - baseline is 2556x1178 pixels, actual is 2436x974 pixels)
/azp run |
Azure Pipelines successfully started running 3 pipeline(s). |
/azp run |
Azure Pipelines successfully started running 3 pipeline(s). |
/azp run |
Azure Pipelines successfully started running 3 pipeline(s). |
/rebase |
0c1c412
to
342aff7
Compare
/azp run |
Azure Pipelines successfully started running 3 pipeline(s). |
Root Cause
The root cause of the issue (extra white space appearing on the left side of the Shell Flyout header and footer in landscape mode on iOS) is that the left safe area inset is implicitly applied to the Shell Flyout content (
UITableView
) by the system'sUITableViewController
. Specifically, the UITableViewController automatically respects the safe area insets provided by the system, causing the content to shift rightward in landscape mode. However, the Shell Flyout header and footer views are managed separately byShellFlyoutLayoutManager
andShellFlyoutContentRenderer
, and these views were not explicitly respecting the left safe area inset. As a result, the header and footer did not align correctly with the content, causing visual inconsistencies and unwanted white space.Description of Change
ShellFlyoutLayoutManager.cs
:Updated the
LayoutHeader
andLayoutContent
methods to explicitly apply the left safe area inset (UIApplication.SharedApplication.GetSafeAreaInsetsForWindow().Left) to the header and content views. This ensures the header view aligns correctly with the content view, respecting the left safe area inset.ShellFlyoutContentRenderer.cs
:Modified the
UpdateFooterPosition()
method to explicitly apply the left safe area inset to the footer view. This ensures the footer aligns correctly with the content and header views.Made
ShouldHonorSafeArea
method internal:Changed the accessibility of the
ShouldHonorSafeArea
method inShellFlyoutLayoutManager
from private to internal, allowing it to be accessed fromShellFlyoutContentRenderer
to determine if the footer should respect or ignore safe area insets.Issues Fixed
Fixes #20131
Tested the behaviour in the following platforms
Screenshots