Navigation title overlapping with SearchBar in SearchSheetView

[mayukhbaidya18]

Bug Description

I've observed that when the search sheet is presented and the user taps the TextField to start typing, the navigation title ("Choose Start" or "Choose Destination") overlaps with the SearchBar, which makes the UI look messy and causes rendering issues.

The navigation title appears to hover above the sheet content with a higher z-index, which then interferes with the TextField visibility when the keyboard appears.

Expected Behavior

The title should be part of the sheet's view hierarchy and positioned above the SearchBar without any overlap, maintaining proper spacing even when the keyboard appears.

Actual Behavior

The navigation title (from .navigationTitle()) floats independently and overlaps with the SearchBar content when the keyboard is presented or when interacting with the TextField.

Video (Observe the top of the sheet!)

github1.mp4

Steps to Reproduce

1. Open the trip planner
2. Tap on the origin or destination location field
3. Observe the search sheet appearing with the title and SearchBar
4. Tap on the SearchBar TextField to start typing
5. Notice the title overlapping with the TextField area

Root Cause

The NavigationView's .navigationTitle() modifier places the title in the navigation bar, which floats above the content layer. This, when combined with the sheet presentation and keyboard appearance, causes z-index/layering issues.

Proposed Solution

The fix involves:

• Removing .navigationTitle() and .navigationBarTitleDisplayMode(.inline)
• Adding the title as a Text view at the top of the VStack
• Using .navigationBarHidden(true) to hide the empty navigation bar
• Wrapping content in a ScrollView for proper scrolling behavior