ios – SwiftUI – textual content shifting outdoors of backside panel

I’ve a view which I’m presenting as a backside panel utilizing sheet and making use of presentation detents to it. I’ve a header view which appears to be like just like what’s on Apple Maps information card. I do have prime padding on it, however when textual content will get longer and is wrapped, I see the textual content retains shifting up and finally strikes out of panel from prime if the textual content turns into extraordinarily lengthy.

How can I forestall the textual content from shifting up and all the time honor the highest padding?

Notice: I’ve an excessive amount of code in my opinion so simply sharing the piece of code the place the problem is, but when extra code is required, then please remark. Thanks!

Code:

struct ContentView: View {
 
    @State var detent: PresentationDetent = .small

    var physique: some View {
        VStack {
            self.headerView
            self.buttonView
            self.detailsListView
            Spacer()
        }
        .padding([.leading, .trailing, .top], 16.0)
        .background(Colour.lightGray)
        .presentationDetents([.small, .large], choice: detent)
        .interactiveDismissDisabled(true)
        .presentationBackgroundInteraction(.enabled)
    }

    non-public var headerView: some View {
        HStack(alignment: .prime) {
            Picture(system: "pencil.circle").resizable().aspectRatio(contentMode: .match).body(width: 52.0, top: 52.0).padding(.main, 5.0)

            VStack(alignment: .main, spacing: 0) {
                Textual content("This can be a very lengthy title that wraps on subsequent line.").font(.title2).daring().fixedSize(horizontal: false, vertical: true)
                if !subtitleText.isBlank {
                    Textual content("This can be a very very very very very very very lengthy subtitle that wraps on subsequent line.").font(.subheadline).foregroundColor(Colour.systemLightSecondary).fixedSize(horizontal: false, vertical: true)
                }
            }.padding(.main, 2.0)
            Spacer()
            HStack {
                Picture(system: "x.circle").resizable().body(width: 25, top: 23).foregroundColor(Colour.grey).padding(.main, 3.0).padding(.prime, 0.0)
            }
        }
        .padding(.prime, 7.0)
        .padding(.backside, viewModel.hideButton ? 3.0 : 8.0)
    }

    non-public var buttonView: some View {
        // Button of top 60
    }

    non-public var detailsListView: some View {
        // Checklist with extra particulars
    }
}

Screenshot of the problem (highlighted in RED) and what’s anticipated (highlighted in GREEN):