In code below, top of GridView is not visible when sheet is presented in .medium scale, and visible when expanded to .large. How can I ensure that top of GridView is always visible regardless of detent scale? I’ve tried a bunch of things with padding, spacers, frames, etc…but not able to get the right result.

import SwiftUI

struct ContentView: View {
    
    @State private var showGrid = false
    
    var body: some View {
        VStack {
            Button {
                showGrid.toggle()
            } label: {
                Text("Show grid")
            }
        }
        .sheet(isPresented: $showGrid) {
            GridView()
                .presentationDetents([.medium, .large])
        }
        .padding()
    }
}

struct GridView: View {
    
    var body: some View {
        
        let columns = [
            GridItem(.flexible()),
            GridItem(.flexible())
        ]
        
        VStack() {
            LazyVGrid(columns: columns, spacing: 2) {
                ForEach(0..<30, id: .self) { index in
                    Circle()
                        .frame(width: 40, height: 40)
                        .overlay {
                            Text("(index)")
                                .foregroundColor(.white)
                        }
                }
            }
            .padding(.top, 50)
            
            Spacer()
        }
    }
}

#Preview {
    ContentView()
}