ios – HStack Scroll View Squishes my AVPlayer Views and its overlay textual content

I’ve this horizontal scroll view in my app which performs three separate movies:

However as you may see, the textual content goes out of bounds. Even the width of every Card is not uniform. This wasn’t the case after I solely put considered one of these videoCards on the display. Why is that occuring and the way do I repair it?

My Scroll View for the video playing cards seems like this:

ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 40) {
                    ForEach(videoManager.movies) { video in
                        RecentCard(video: video)
                    }
                }
                .onChange(of: videoManager.movies) { _ in
                    print("VM loaded Recents Movies")
                }
                
            }

and every VideoCard (I name them recentCards), seems like this:

struct RecentCard: View {
    @State personal var participant = AVPlayer()
    @State personal var playToggle: Bool = true
    @State var video: VideoModel
    
    var physique: some View {
        ZStack(alignment: .main) {
            videoPlayer
            
            textOverlay
        }
        .body(maxWidth: .infinity, maxHeight: 300, alignment: .main)
        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .cornerRadius(20)
    }
    
    
    var videoPlayer: some View {
        VideoPlayer(participant: participant)
            .scaledToFill()
            .onAppear {
                participant = AVPlayer(url: video.videoUrlPath!)
                participant.play()
            }
            .onTapGesture {
                if playToggle == false {
                    participant.play()
                    playToggle = true
                } else {
                    participant.pause()
                    playToggle = false
                }
                let impactHeavy = UIImpactFeedbackGenerator(model: .heavy)
                impactHeavy.impactOccurred()
            }
            .opacity(0.56)
            .background(.ultraThinMaterial)

    }
    
    var textOverlay: some View {
        VStack(alignment: .main) {
            Textual content(video.title)
                .font(.title.daring())
                .textCase(.uppercase)
            VStack(alignment: .main) {
                Textual content(video.title2)
                    .font(.physique)
                Textual content("(video.viewCount) Views")
                    .font(.physique)
                    .body(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
                    .padding(15)
                    .offset(x: 10)
                //Textual content(vManager.video.videoUrlPath?.absoluteString ?? "NIL")
            }
            .opacity(0.67)
        }
        .body(maxWidth: .infinity, maxHeight: 200, alignment: .topLeading)
        .padding()
        .offset(y: 10)
        .foregroundColor(.white)

    }
}