SwiftUI - offset wrong or weird padding? - swiftui

Question

I'm creating a schedule app and im trying to render the activities on a calendar sort of thing. Im doing this by having a set spacing of 20 between every hour mark. This means that to position the activities I can take the hour the activity start times this set height of 20 to position it correctly. This does indeed work but when I add multiple activities the offset is wrong? But if I render every activity on its own the offset is correct.
This is the code for displaying the activities.
struct Event: Hashable {
var name: String
var start: Int
var end: Int
var y: CGFloat
var eHeight: CGFloat
var color: Color
}
struct EventIndicatorView: View {
var day = [Event]()
init() {
day.append(createEvent(name: "Matematik", start: 8, end: 9, color: Color.blue))
day.append(createEvent(name: "Svenska", start: 10, end: 11, color: Color.green))
day.append(createEvent(name: "Fysik", start: 12, end: 14, color: Color.red))
day.append(createEvent(name: "Idrott", start: 15, end: 16, color: Color.pink))
}
func createEvent(name: String, start: Int, end: Int, color: Color) -> Event {
let eHeight = CGFloat((end - start) * height * 2)
//let y = CGFloat((start*height*2) + height)
let y = CGFloat((start*2*height)+height*(end-start))
let e = Event(name: name, start: start, end: end, y: y, eHeight: eHeight, color: color)
return e
}
var body: some View {
VStack(spacing: 0) {
ForEach(day, id: \.self) { d in
HStack() {
VStack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(d.color)
.frame(width:5, height: d.eHeight)
ZStack(alignment: .topLeading) {
Rectangle()
.fill(d.color.opacity(0.5))
.frame(height: d.eHeight)
Text(d.name)
.padding(EdgeInsets(top: 4, leading: 4, bottom: 0, trailing: 0))
.foregroundColor(d.color)
.font(.subheadline.bold())
}
}
.cornerRadius(4)
.offset(x: 60, y: d.y)
}
}
.frame(height: CGFloat(height))
}
Spacer()
}
}
}
This is the code for showing the hours.
var hours = [String]()
struct CalenderView: View {
init() {
for hour in 0...24 {
if hour == 24 {
hours.append("00:00")
return
}
if hour <= 9 {
hours.append("0\(hour):00")
} else {
hours.append("\(hour):00")
}
}
}
var body: some View {
VStack(spacing: CGFloat(height)) {
ForEach(hours.indices, id:\.self) {index in
HStack(spacing: 10) {
Text(hours[index])
.frame(width: 40, height: CGFloat(height))
.font(.caption.bold())
.foregroundColor(Color(.systemGray))
Rectangle()
.fill(Color(.systemGray4))
.frame(height: 1)
}
.padding(.leading, 10)
}
}
}
}
This code results in this:
Display of multiple acctiviys
The green one should be positioned on 10 but isn't.
Here is a picture where I only display one activity:
Only one activity
But if I only display the green one its position is correct