title: SwiftUI content is not displayed on top of the screen
body: <p>I have a <code>NavigationView</code> and then a <code>VStack</code>. The issue is that everything inside <code>VStack</code> is being displayed in the middle of the screen and not on top. Why is that?</p>
  
  <pre><code>var body: some View {
      VStack {
          VStack(alignment: .leading) {
  
              if (request?.receiverID ?? "") == userDataViewModel.userID {
                  Text("\(sendertFirstName) wants to ship your package").font(.title)
              } else {
                  Text("You want to ship \(recieverFirstName)'s package").font(.title)
              }
  
              HStack{
                  Image(systemName: "clock.fill").font(.subheadline)
                  Text("\(createdAt, formatter: DateService().shortTime)").font(.subheadline).foregroundColor(.secondary)
              }
  
              HStack {
                  VStack(alignment: .leading) {
                      HStack {
                          Image(systemName: "person.fill").font(.subheadline)
                          Text(sendertFirstName).font(.subheadline).foregroundColor(.secondary)
                      }
                  }
  
                  Spacer()
  
                  VStack(alignment: .leading) {
                      HStack {
                          Image(systemName: "star.fill")
                          Text(rating).font(.subheadline).foregroundColor(.secondary)
                      }
                  }
              }
          }
  
          VStack(alignment: .center) {
              HStack {
                  Button("Accept") {
                      //print(self.request.createdAt)
                      //FirestoreService().respondToRequest(request: self.request.documentReference, status: "accepted")
                  }
                  .padding()
                  Button("Decline") {
                      //FirestoreService().respondToRequest(request: self.request.documentReference, status: "declined")
                  }
                  .foregroundColor(.red)
                  .padding()
              }
          }
  
          ScrollView {
              ForEach(messages) { (message: Message) in
                  if message.senderId == self.userDataViewModel.userID {
                      HStack {
                          Spacer()
                          Text(message.text).font(.subheadline).padding(7.5).background(self.blue).cornerRadius(30).foregroundColor(.white)
                      }.padding(.bottom, 2)
                  } else {
                      HStack {
                          Text(message.text).font(.subheadline).padding(7.5).background(self.gray).cornerRadius(30).foregroundColor(.white)
                          Spacer()
                      }.padding(.bottom, 2)
                  }
  
              }
          }
  
          HStack {
              TextField("Message", text: $inputMessage).padding(5).background(self.gray).cornerRadius(30).foregroundColor(.white)
  
              Button(action: {
                  let msg: [String: Any] = [
                      "text": self.inputMessage,
                      "createdAt": Timestamp(),
                      "senderId": self.userDataViewModel.userID
                  ]
  
                  self.reference.updateData([
                      "messages": FieldValue.arrayUnion([msg])
                  ])
  
                  self.messages.append(Message(dictionary: msg))
  
                  self.inputMessage = ""
  
              }) {
                  Image(systemName: "arrow.up.circle.fill").foregroundColor(self.blue).font(.title)
              }
          }
          Spacer()
      }
      .padding()
      .border(Color.red)
  }
  </code></pre>
  
  <p>I want the content to start on top not on the middle. What am I doing wrong here?</p>
  
  <p><a href="https://i.stack.imgur.com/ngwn7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ngwn7.png" alt="enter image description here"></a></p>