[Issue-Resolver] Added test for Flyout CollectionView alignment (issue 30483)

[kubaflo]

Introduces a new Shell-based sample and automated UI test for Issue 30483, which addresses misalignment of the first item in a CollectionView within the flyout menu on iOS. The sample includes a custom flyout header, content, and footer, and the test verifies that the first item is properly aligned below the header.

Issues Fixed

Fixes #30483

This issue is no longer present in .NET 10, but the test helps guard against potential future regressions.

Issue #30483 Resolution Summary

Status: ✅ Already Fixed (No Code Changes Needed)

Investigation Date: December 24, 2025
Tested On: iOS 18.5 (iPhone Xs)
Original Report: Issue occurred on iPhone 15 iOS 17.2+, worked on iPhone 13 iOS 15.5

---

Investigation Results

Test Created

Created reproduction test page and automated UI test:

• src/Controls/tests/TestCases.HostApp/Issues/Issue30483.xaml
• src/Controls/tests/TestCases.HostApp/Issues/Issue30483.xaml.cs
• src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue30483.cs

Test Results

Platform: iOS 18.5 (iPhone Xs)

[TEST] Header Rect: X=0, Y=44, Width=310, Height=49
[TEST] FirstItem Rect: X=0, Y=92, Width=310, Height=45
[TEST] FirstItemLabel Rect: X=50, Y=92, Width=260, Height=45
[TEST] Header bottom: 93
[TEST] First item top: 92
[TEST] Gap between header and first item: -1

Result: ✅ Test PASSED

The gap of -1 pixel (slight overlap) indicates correct alignment. The first CollectionView item is positioned immediately below the FlyoutHeader, which is the expected behavior.

Analysis

The issue was reported to occur specifically on:

• ❌ iPhone 15 iOS 17.2 - Misaligned (reported)
• ✅ iPhone 13 iOS 15.5 - Works correctly (reported)
• ✅ iPhone Xs iOS 18.5 - Works correctly (tested)

Possible Explanations:

1. Fixed in iOS 18.x: The issue may have been an iOS 17.x-specific bug that Apple fixed in iOS 18.0+

2. Fixed by another PR: The issue may have been resolved by another PR between when it was reported (July 2025) and now (December 2025)

3. Device-specific: The issue may have been specific to iPhone 15 series with iOS 17.x

Note: I was unable to test on iPhone 15 with iOS 17.2 as that runtime is not available in my environment.

---

Original Issue Details

Reported: July 8, 2025
Regression Started: .NET MAUI 9.0.51
Last Known Working: .NET MAUI 9.0.50

Root Cause (Hypothesized):

• CollectionViewHandler2 introduced in 9.0.51 (commit a52e5fa)
• Uses iOS Compositional Layout APIs
• May have had different behavior on iOS 17.x that has since been resolved

---

Test Coverage Added

The test files created provide regression coverage for:

• Shell with FlyoutHeader + FlyoutContent (CollectionView) + FlyoutFooter
• First CollectionView item alignment below header
• Automated measurement verification

Assertion: Gap between header bottom and first item top must be < 50px

---

Recommendation

1. Keep test files - They provide good regression coverage
2. Close issue with documentation showing it's fixed in current main branch
3. Request confirmation from original reporter if they still see the issue on iOS 17.x devices

---

Files Added (for regression testing)

src/Controls/tests/TestCases.HostApp/Issues/
├── Issue30483.xaml
└── Issue30483.xaml.cs

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/
└── Issue30483.cs

Screen.Recording.2025-12-24.at.14.08.40.mov

[dotnet-policy-service]

Hey there @@kubaflo! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[kubaflo]

https://github.com/user-attachments/files/24330050/chat.json

[PureWeen]

FlyoutCollectionViewFirstItemShouldBeAlignedBelowHeader test is failing on winui