This is my code - the problem is that I made most of the app so far using the iPhone 14 Pro Max and it has the sizing of that phone so can you please help change it so that it will fit any phone no matter size. This is most of the code.

        // Page 1: Map Search
        VStack {
            ZStack(alignment: .topLeading) {
                Map(coordinateRegion: $mapAPI.region, annotationItems: mapAPI.locations) { location in
                    MapMarker(coordinate: location.coordinate, tint: .red)
                }
                .ignoresSafeArea()
                
                VStack {
                    HStack {
                        TextField("Enter an address", text: $text)
                            .textFieldStyle(.roundedBorder)
                            .padding(.horizontal)
                            .foregroundColor(.black)
                        
                        Button(action: {
                            fetchLocationInfoFromWikipedia(for: text)
                            mapAPI.getLocation(address: text, delta: 0.5)
                            showLocationInfo = true
                        }) {
                            Image(systemName: "magnifyingglass")
                                .foregroundColor(.black)
                        }
                        .padding(.leading, -50)
                    }
                    .padding()
                    
                    if showLocationInfo {
                        VStack {
                            Spacer()
                            
                            Rectangle()
                                .fill(Color.white)
                                .frame(height: 250)
                                .frame(width: 400)
                                .cornerRadius(15)
                                .overlay(
                                    ScrollView {
                                        Text(locationInfo)
                                            .foregroundColor(.black)
                                            .padding(.horizontal, 10)
                                            .font(.system(size: 14))
                                            .font(.custom("Serif", fixedSize: 14))
                                    }
                                    .padding()
                                )
                                .padding(.horizontal, 20)
                                .padding(.bottom, 10) // Adjust the bottom padding here
                            
                            HStack(spacing: 70) {
                                Button(action: {
                                    // Open YouTube search with address
                                    openWebsite("https://www.youtube.com/results?search_query=\(encodedAddress)")
                                }) {
                                    Image(systemName: "play.circle")
                                        .foregroundColor(.black)
                                }
                                
                                Button(action: {
                                    // Open Google Maps with address
                                    openWebsite("https://www.google.com/maps/place/\(encodedAddress)")
                                }) {
                                    Image(systemName: "map")
                                        .foregroundColor(.black)
                                }
                                
                                Button(action: {
                                    // Open Google Earth with address
                                    openWebsite("https://earth.google.com/web/search/\(encodedAddress)/")
                                }) {
                                    Image(systemName: "globe")
                                        .foregroundColor(.black)
                                }
                            }
                            .frame(maxWidth: .infinity-10) // Expand the HStack to full width
                            .padding(.vertical, 10) // Adjust the vertical padding here
                            .background(Color.white) // Set background color to white
                            .cornerRadius(10) // Apply corner radius
                            .padding(.horizontal, 20)
                            .padding(.bottom, 20)
                            .padding(.top, -10)// Adjust the horizontal padding here
                        }
                    }
                }
            }
        }
        .tabItem {
            Image(systemName: "location.circle.fill")
            Text("Map")
        }
        
        // Page 2: Photos
        
        
        VStack {
            Button(action: {
                showImagePicker = true
                selectedImageSourceType = .photoLibrary
            }) {
                Image(systemName: "photo")
                    .font(.title)
                    .foregroundColor(.black)
            }
            .padding()
            .sheet(isPresented: $showImagePicker, onDismiss: loadImage) {
                ImagePicker(sourceType: selectedImageSourceType ?? .photoLibrary) { image in
                    selectedImage = image
                }
            }
            
            Button(action: {
                showImagePicker = true
                selectedImageSourceType = .camera
            }) {
                Image(systemName: "camera")
                    .font(.title)
                    .foregroundColor(.black)
            }
            .padding()
            .sheet(isPresented: $showImagePicker, onDismiss: loadImage) {
                ImagePicker(sourceType: selectedImageSourceType ?? .photoLibrary) { image in
                    selectedImage = image
                }
            }
            
            
            
            if !images.isEmpty {
                ScrollView {
                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 120))], spacing: 10) {
                        ForEach(images, id: \.self) { image in
                            Image(uiImage: image)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(height: 120)
                                .cornerRadius(10)
                        }
                    }
                    .padding()
                }
           } else {
                Text("No photos available")
                    .foregroundColor(.gray)
            }
        }