VStack Alignment Issue

Hi Apple developer,

I'm totally new in the development world using SwiftUI with just a little experience of Flutter.

Currently I'm struggling with the combination of VStack and the alignment of the sub views. I'm using a LazyVGrid with multiple Rectangles and overlays inside. The overlay contains a VStack with a leading alignment. And here is the problem. I framed them with a border to visualize the limits of these views. But it seams, that the leading alignment is not working properly. There is a large gap on the left side of the Image() and Text() views and I don't know why.

I'm very happy for any advice.

Here is my code of this view.

Thanks a lot!

import SwiftUI
import SwiftData

extension UIScreen {
    static let screenWidth: CGFloat = UIScreen.main.bounds.size.width
    static let screenHeight: CGFloat = UIScreen.main.bounds.size.height
    static let screenSize: CGSize = UIScreen.main.bounds.size
}

struct TestView: View {
    let constants: Constants = Constants()
    let columnCount: Int = 2
    let gridSpacing: CGFloat = 10
    let gridRadius: CGFloat
    let gridWidth: CGFloat
    let gridHeight: CGFloat
    
    let gridItems = [
        Item(title: "Total", color: Color.gray, image: "dollarsign.circle.fill")
    ]
    
    @State private var isSheetPresented: Bool = false
    
    init() {
        gridWidth = UIScreen._screenWidth / 2 - 3 * gridSpacing
        gridHeight = 1.25 * gridWidth
        gridRadius = gridWidth / 7.5
    }
    
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                LazyVGrid(columns: Array(
                    repeating: .init(.flexible(), spacing: -2 * gridSpacing),
                    count: columnCount),
                    spacing: 2 * gridSpacing) {
                        ForEach(gridItems, id: \.title) { item in
                            RoundedRectangle(cornerRadius: gridRadius, style: .continuous)
                                .fill(item.color.gradient)
                                .frame(width: gridWidth, height: gridHeight)
                                .overlay(
                                    VStack(alignment: .leading) {
                                        Image(systemName: item.image)
                                            .colorInvert()
                                            .font(.system(size: 30))
                                            .border(Color.yellow)
                                        Spacer()
                                        Text(item.title)
                                            .font(.system(size: 20))
                                            .foregroundColor(.white)
                                            .border(Color.yellow)
                                    }
                                    .padding([.top, .bottom])
                                    .frame(maxWidth: .infinity)
                                    .border(Color.black)
                                )
                        }
                }.padding(.top)
            }
            .navigationTitle("Test View")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Menu {
                        Button("Add", action: {})
                    } label: {
                        Image(systemName: "ellipsis.circle")
                    }
                }
            }
        }
    }
}

struct Item: Identifiable {
    let id: UUID = UUID()
    let title: String
    let color: Color
    let image: String
}

#Preview {
    TestView()
}