LazyHStack cuts off content when scrolling - ios

Question

I have a LazyHStack nested in a ScrollView for showing some data from an API, but everytime I scroll it, the content is being cut off like this:
Here is the full struct:
struct MovieDetailView: View {
#EnvironmentObject private var navStack: NavigationStack
#ObservedObject var viewModel: MovieDetailVM
init(viewModel: MovieDetailVM) {
self.viewModel = viewModel
//UIScrollView.appearance().bounces = false
}
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .top) {
ScrollView(showsIndicators: false) {
VStack {
GeometryReader { (proxy: GeometryProxy) in
if proxy.frame(in: .global).minY <= 0 {
Image(uiImage: (UIImage(data: viewModel.backdropData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_BACKDROP))!)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: proxy.size.width, height: 330)
} else {
Image(uiImage: (UIImage(data: viewModel.backdropData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_BACKDROP))!)
.resizable()
.aspectRatio(contentMode: .fill)
.offset(y: -proxy.frame(in: .global).minY)
.frame(width: proxy.size.width, height: 330 + proxy.frame(in: .global).minY)
}
}
VStack(alignment: .leading) {
FDDivider(height: 20)
HStack {
Image(uiImage: (UIImage(data: viewModel.posterData) ?? UIImage(named: JWConfig.IMG_PLACEHOLDER_MOVIE_POSTER))!)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 120, height: 180)
.cornerRadius(20)
.clipped()
VStack(alignment: .leading) {
Text(viewModel.title)
.font(Font.custom(JWConfig.FONT_ARIAL, size: 25).weight(.semibold))
.foregroundColor(.SAPPHIRE)
.padding([.top, .bottom], 12)
.lineLimit(3)
HStack {
ForEach(viewModel.genres.prefix(2), id: \.ID) { genre in
JWBorderPill(text: genre.name, textSize: 12, textColor: .SAPPHIRE, borderColor: .DANUBE)
}
}
}.padding([.leading], 10)
Spacer()
}.padding([.leading, .trailing], 20)
FDDivider(height: 20)
HStack(spacing: 50) {
VStack {
Text("Release Date")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
.foregroundColor(.gray)
.padding([.bottom], 1)
Text(viewModel.releaseDate)
.font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
}
VStack() {
Text("Duration")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
.foregroundColor(.gray)
.padding([.bottom], 1)
Text("\(viewModel.runtime)")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
}
VStack() {
Text("Rating")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 15))
.foregroundColor(.gray)
.padding([.bottom], 1)
Text("\(String(format: "%.1f", viewModel.voteAverage)) / 10")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 18).weight(.semibold))
}
}.frame(width: geometry.size.width)
VStack(alignment: .leading) {
Text("Overview")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 23).weight(.semibold))
.foregroundColor(.SAPPHIRE)
.padding([.top, .bottom], 8)
Text(viewModel.overview)
.font(Font.custom(JWConfig.FONT_ARIAL, size: 17))
.foregroundColor(.gray)
}.padding([.leading, .trailing], 24)
VStack(alignment: .leading) {
Text("Production Companies")
.font(Font.custom(JWConfig.FONT_ARIAL, size: 23).weight(.semibold))
.foregroundColor(.SAPPHIRE)
.padding([.top], 8)
ScrollView(.horizontal, showsIndicators: false) {
LazyHStack {
ForEach(viewModel.productionCompanies, id: \.ID) { company in
ProductionCompanyCell(viewModel: ProductionCompanyCellVM(company))
}
}
}
}.frame(height: 250)
.padding([.leading], 24)
FDDivider(height: 400)
}.frame(width: geometry.size.width)
.background(Color.white)
.cornerRadiusWithEachCorner(50, corners: [.topLeft, .topRight])
.offset(y: 180)
}
}
HStack {
JWBackButton()
Spacer()
}.padding(EdgeInsets(top: 50, leading: 25, bottom: 0, trailing: 0))
}
}.edgesIgnoringSafeArea(.all)
}
}
Is there something wrong with my code? Please let me know if you need the full body code, and I'm using Xcode 12.4 at the moment