Hi, I'm converting my UIKit view controllers to SwiftUI views. In one part of my app I have a coordinator (not the SwiftUI kind of coordinator, the Coordinator Pattern kind) that shows different views depending on the state. I have new SwiftUI view called EmptyLogView that displays where there's nothing to show in the log (the .noLiftEvents state).

I transition to the correct view by passing in the .noLiftEvents state here:

    func transition(to newState: LiftLogState) {
        shownViewController?.remove()
        let vc = viewController(for: newState)
        add(vc)
        shownViewController = vc
        state = newState
    }

The ' viewController(for: newState)' function creates the EmptyLogView, puts it in a UIHostingController, returns the hosting controller:

 case .noLiftEvents:
            let emptyLogView = EmptyLogView(coordinator: self)
            let hostingController = UIHostingController(rootView: emptyLogView)

            hostingController.navigationItem.title = "Lift Log"
            add(hostingController) // Add the hostingController as a child view controller

            return hostingController

The EmptyLogView does appear when the log is empty, but the content is shoved up in the left corner, mostly out of view. Here's the code:

struct EmptyLogView: View {
    @Environment(\.presentationMode) var presentationMode

    @State private var activeViewController: UIViewController?

    var coordinator: Coordinator?

    var body: some View {
        ZStack {
            Color("darkerBlue")
                .ignoresSafeArea()

            VStack(spacing: 20) {
                Image("barbell")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 200, height: 200) // Adjust the image size

                Text("You don't have any lifts saved.")
                    .font(.title)
                    .foregroundColor(.white)
                    .padding()

                Button(action: {
                    // Handle button action
                }) {
                    Text("Do it")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding(EdgeInsets(top: 8, leading: 50, bottom: 8, trailing: 50))
                        .background(Color("lightBlue"))
                        .cornerRadius(8)
                }
            }
        }
    }

Does anybody know what could be causing it to be shoved off the screen?

Thanks!