How to make the first row in a SwiftUI List span edge-to-edge like in Apple Health?

I’m trying to recreate a layout similar to the Apple Health app. Specifically, I want the first element in a scrollable view to span edge-to-edge, while the rest of the content should look like a default (.insetGrouped) SwiftUI List.

Is there a way to achieve this effect within a List — having the first row ignore horizontal insets — or is this typically done using a ScrollView + VStack with custom styling to mimic List behavior?

I’d prefer to avoid fully recreating list sections manually if there’s a cleaner way to do this using List.

List {
    Section {
    } header: {
        BasicHealthRangeCharts(samples: viewModel.healthData.compactMap(ChartHealthSample.init(from:)))
            .padding(.vertical)
    }
    .background(Color(UIColor.systemBackground).frame(width: 1000))
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))

    
    Section {
        Button {
            viewModel.onPinButton()
        } label: {
            Text(viewModel.isPinned ? "Unpin from summary" : "Pin in summary")
                .foregroundColor(.primary)
                .padding()
        }
        
    } header: {
        Text("Options")
            .padding(.vertical, 16)
    }
    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 16))
    .headerProminence(.increased)
    
    Section {
        NavigationLink {
            PetHealthAllDataView(dataType: viewModel.type, data: viewModel.healthData)
        } label: {
            Text("Show all data")
        }
    }
}