I have finally got my pages to look good on multiple iphone screen sizes. However, now when I click the search bar, the keyboard pushes up my page so that the search bar and first result are above the top edge.

var body: some View {
        NavigationView {
            ZStack(alignment: .top) {
                VStack(spacing: 0) {
                    // Main Content
                    VStack(spacing: screenHeight * 0.02) {
                        searchBar()
                            .padding(.bottom, screenHeight > 700 ? 10 : 0)

                        SectionView(...)

                        SectionView(...)

                        SectionView(...)

                        Spacer(minLength: 0)
                    }
                    .padding([.leading, .trailing], screenWidth * 0.03)
                    .frame(maxHeight: .infinity, alignment: .top)
                    .ignoresSafeArea(.keyboard, edges: .bottom)

                    // Bottom Navigation Bar
                    Divider().background(Color.gray)
                    navigationBar()
                }
                .background(Color.white)
                .ignoresSafeArea(.keyboard, edges: .bottom)

                // Dropdown List Overlay placed inside ZStack to appear over the main content
                if isSearching && !filteredDestinations.isEmpty {
                    dropdownListOverlay()
                        .offset(y: screenHeight * 0.075)
                }
            }
            .onAppear {
                // Set initial screen dimensions once
                screenWidth = UIScreen.main.bounds.width
                screenHeight = UIScreen.main.bounds.height
            }
        }
    }

Initial Screen
Screen when search bar is pressed

I tried using .ignoresSafeArea(.keyboard, edges: .bottom) which only seemed to affect the navigation bar at the bottom