Background When I build my app using an iPhone 11, everything fits on the screen perfectly. But when I build using an iPod Touch 7th gen, some of my view gets hidden by the tabItems. Pics below:

iPod Touch 7th gen without spacer.

iPod Touch 7th gen with a spacer.

iPhone 11 without spacer.

iPhone 11 with the minHeight spacer.

*I'm having trouble embedding the pictures in this post.

I'm using the iDine tutorial as a template but I've customized a couple items. This is the source code (this will download the original iDine project to your computer - this link is found on the previous link's page about halfway down).

Problem

As previously stated, part of my view gets hidden by tabItem bar.

I've resovled this with a static Spacer().fram(maxHeight: 30) but I'd really like to avoid this - it forces the iPod Touch 7th gen build to show the entire view but it scrunches the screen and makes the iPhone 11 build much worse looking than it could look.

Besides, I have a gut feeling that using a static spacer like this is not good practice - there must be either something in my code already that is causing this problem (which I haven't found even though I've played with just about everything in this file) or I am missing something that would dynamically keep this from happening across all devices.

Code

ItemDetail.swift

import SwiftUI

struct ItemDetail: View {
    @EnvironmentObject var order: Order
    @State private var quantity = 1
    @State private var sizeSelector = 0
    let item: ItemType

    var body: some View {
        VStack {
            VStack {
                Image(item.mainImage)
                    .resizable()
                    .scaledToFill()
                Text("Photo: \(item.photoCredit)")
                    .padding(4)
                    .foregroundColor(.gray)
                    .font(.caption2)
                    .offset(x: -5, y: -5)
            }

            Text(item.description).padding()
            Spacer().frame(minHeight: 5, maxHeight: 30)
            Picker("Size: \(item.items[0].nickname)", selection: $sizeSelector) {
                ForEach(0..<item.items.count, id: \.self) {
                    Text(self.item.items[$0].nickname)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding()
            .opacity(sizePickerVisible() ? 1 : 0)
            .frame(height: (sizePickerVisible() ? nil : 0))
            HStack {
                Picker("Quantity: \(quantity)", selection: $quantity) {
                        ForEach(0 ..< 20) {
                            Text("\($0)")
                        }.navigationTitle(Text("Size Selection"))
                }.pickerStyle(MenuPickerStyle()).padding().font(.headline).background(Color.red).foregroundColor(.white).clipShape(Capsule())
                Button("Add To Cart"){
                    order.add(item: item.items[sizeSelector], quantity: quantity)
                }.padding().font(.headline).background(Color.red).foregroundColor(.white).clipShape(Capsule())
            }
            Spacer()
                    .frame(minHeight: 30)//I'd like to get rid of this. Only here so small iphone views don't go off the bottom of the screen
        }.navigationTitle(item.name).navigationBarTitleDisplayMode(.inline)
    }
    func sizePickerVisible() -> Bool {
        if item.items.count < 2 {
            return false
        } else {
            return true
        }
    }
}

Any help is appreciated. Thanks!