Apply leading edge border to repeated view, variable height - layout

Question

I've just started with SwiftUI coming from a webdev background. I'm trying to apply a leading border to a HStack by using a Rectangle as the first element. The contents of the HStack are variable height due to text-wrapping (lineLimit = 2) and I can't seem to get the border to play nice and adopt the height of its neighbouring VStack. Here's an image (code below)
HStack(alignment: .top, spacing: 0) {
Rectangle().fill(accentColor).frame(width: 2.0)
.fixedSize(horizontal: false, vertical: false)
VStack(alignment: .leading) {
Text(communityName.uppercased())
.font(.custom("Raleway-Regular", size: 10))
.foregroundColor(Color(.sRGB, red: 0.4, green: 0.4, blue: 0.4))
.kerning(1.2)
.padding(.top, 20)
Text(name)
.font(.custom("DMSerifDisplay-Regular", size: 20))
.foregroundColor(Color(.sRGB, red: 0.2, green: 0.2, blue: 0.2))
.lineLimit(2)
.fixedSize(horizontal: false, vertical: true)
}
.padding(.leading, 10.0)
Spacer()
}
.padding(7.0)
.background(Color(.sRGB, red: 0.969, green: 0.969, blue: 0.969))
And the consumer view code:
ForumResultRow(name: "Bathrooms & Laundry", communityName: "Homeone", accentColor: Color.orange)
ForumResultRow(name: "Investor Stories & Showcase + Property Market Economics", communityName: "PropertyChat", accentColor: Color.blue)
ForumResultRow(name: "Bathrooms & Laundry", communityName: "Homeone", accentColor: Color.orange)
It seems that when rendering multiple of the same view, the border will use the same height for all that is equal to the height in the shortest instance. Any tips on how to get this to behave properly?

Answer 1

Here is a solution. Tested with Xcode 11.4 / iOS 13.4
var body: some View {
HStack(alignment: .top, spacing: 0) {
VStack(alignment: .leading) {
Text(communityName.uppercased())
.font(.custom("Raleway-Regular", size: 10))
.foregroundColor(Color(.sRGB, red: 0.4, green: 0.4, blue: 0.4))
.kerning(1.2)
.padding(.top, 20)
Text(name)
.font(.custom("DMSerifDisplay-Regular", size: 20))
.foregroundColor(Color(.sRGB, red: 0.2, green: 0.2, blue: 0.2))
.lineLimit(2)
.fixedSize(horizontal: false, vertical: true)
}
.padding(.leading, 10.0)
Spacer()
}
.overlay(
Rectangle().fill(accentColor).frame(width: 2.0), // << here !!
alignment: .leading)
.padding(7.0)
.background(Color(.sRGB, red: 0.969, green: 0.969, blue: 0.969))
}