Navigation View starts with a gap then returns to normal upon scrolling; missing title

Scenario: Listed an array within a Navigation View.
Problem: Initial display shows a gap at the top which returns to normal navigation bar width upon scroll.
Also, no navigation title displayed.

This is the initial view (notice the gap at the top):

This is after I scrolled up a bit (notice return to regular nav bar width):

Here's the entire code:

struct VaccinesDataView: View {
    @State private var isHidden = false
    @EnvironmentObject var settings: UserSettings

    var body: some View {
        VStack {
            if SingletonData.shared.vaccineHeaders != nil {
                NavigationView {
                    List(SingletonData.shared.vaccineHeaders!, id: \.self) { source in
                        NavigationLink(destination: VaccineDetailView()) {
                            VStack(alignment: .leading, spacing: 10.0) {
                                HStack {
                                    Text(source.mechanic).font(.system(size: 16.0))
                                        .foregroundColor(.red)
                                    Spacer()
                                }
                                VStack {
                                    HStack {
                                        // Sponsors:
                                        Text("Sponsors: ").foregroundColor(Color("DarkPen"))
                                        Spacer()
                                    }
                                }
                            }
                        }
                    }.font(.system(size: 14))
                        .foregroundColor(Color("DirtyBrown"))
                        .background(Color("Background"))
                }
            }
        }

        .navigationBarTitleDisplayMode(.inline)
        .navigationBarTitle("Vaccines", displayMode: .inline)
    }

    func doSomething() {}
}

What's causing the initial gap and what is the remedy?