Resize views imported from another view - SwiftUI - ios

Question

I am trying to lay out a view with data from my data model and another view but I am struggling to resize the imported view. As you can see from the image below the table I have made in a separate view is taking over the full-frame.
I have tried to resize it in my master view where I am pulling everything together but no luck. I have also tried the scaleEffect modifier but that only scales the content in the view and keeps the view bounding regions the same scale.
Ideally, I would like to resize the table down so there is an even split between the paragraph and table. Also, apologies for the large amount of code shared here but I want to share all the formatting I have used incase there is something in there that is stopping me get the desired result.
The below image is displayed on an iPad which is where the app is being distributed.
Here is where I am pulling all the data together:
struct Tab1Section08: View {
var product: ProductModel
let frameHeight: CGFloat = 900
let title = "This is a title"
let subtitle = "This is a subtitle"
let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
struct Tab1Section08: View {
let frameHeight: CGFloat = 900
let title = "This is a title"
let subtitle = "This is a subtitle"
let paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
var body: some View {
ZStack{
Color(red: 0.97, green: 0.97, blue: 0.97)
.ignoresSafeArea()
.frame(height: frameHeight)
VStack {
Text(title)
.font(.custom("Avenir-Black", size: 30))
.padding(.top, 60)
.padding(.bottom, 20)
HStack{
VStack {
Text(subtitle)
.font(.custom("Avenir-Black", size: 20))
Text(paragraph)
.font(.custom("Avenir", size: 16))
.multilineTextAlignment(.center)
.fixedSize(horizontal: false, vertical: true)
.lineSpacing(10)
.padding(.bottom, 20)
}
VStack {
Tab1Section08ListRow()
.padding(.bottom, 20)
Text(subtitle)
.font(.custom("Avenir", size: 12))
}
}
}
}
}
}
Here is a view where I am creating the table:
struct Tab1Section08ListRow: View {
let color: Color = .gray
let width: CGFloat = 1
let textPadding: CGFloat = 5
let frameWidth: CGFloat = 250
let amount: CGFloat = 3
let title = ["first", "second","third"]
let columns = ["first", "second", "third", "fourth", "fifth", "sixth"]
var body: some View {
let height: CGFloat = CGFloat(title.count)*40
VStack {
HStack{
ForEach(0..<title.count, id: \.self) { item in
Text(title[item])
.font(.custom("Avenir-Heavy", size: 18))
.fontWeight(.bold)
.frame(width: frameWidth)
.padding(.bottom, 20)
}
}
HStack{
VStack(alignment: .leading) {
ForEach(0..<columns.count, id: \.self) { item in
Text(columns[item])
.font(.custom("Avenir", size: 14))
.foregroundColor(.secondary)
.frame(width: frameWidth)
.padding(.bottom, textPadding)
.padding(.top, textPadding)
}
}
Rectangle()
.fill(color)
.frame(width: width, height: height)
.edgesIgnoringSafeArea(.vertical)
VStack(alignment: .leading) {
ForEach(0..<columns.count, id: \.self) { item in
Text(columns[item])
.font(.custom("Avenir", size: 14))
.foregroundColor(.secondary)
.frame(width: frameWidth)
.padding(.bottom, textPadding)
.padding(.top, textPadding)
}
}
Rectangle()
.fill(color)
.frame(width: width, height: height)
.edgesIgnoringSafeArea(.vertical)
VStack(alignment: .leading) {
ForEach(0..<columns.count, id: \.self) { item in
Text(columns[item])
.font(.custom("Avenir", size: 14))
.foregroundColor(.secondary)
.frame(width: frameWidth)
.padding(.bottom, textPadding)
.padding(.top, textPadding)
}
}
}
}
}
}

Answer 1

As I suspected from the beginning it is your fixed frames. If I comment out .frame(width: frameWidth) the view collapses to give your "lorem ipsum" view more room.
With .frame(width: frameWidth):
And without:
Hard coding frames like that messes with SwiftUI's ability to handle the different sizes. I would consider using a geometry reader and expressing the widths a percentage of screen size.