How can I get the listRowInsets to create seamless edges in keeping with the rest of a form?

Question

I am trying to make create a view which incorporates a button and a picker in a HStack to eventually be placed inside a form.

I would like the button to seamlessly blend with the edges of the list row and I have been able to do this by using the .listRowInsets() view modifier.

However this removes the insets for the whole view. I would now like to add the insets back but only to the picker and I would like this to be consistent with all other listRows inside the form, no matter what the users dynamic font is set to.

Below is the view that created the Picker with the button, I have commented where I think the padding would need to go.

struct PickerWithButton: View {
    
    @Binding var selection: String
    @Binding var strings: [String]
    @Binding var toggle: Bool
    
    var body: some View {
        HStack(spacing: 0){
            Button(action: { }, label: {
                Image(systemName: "plus")
            })
            .padding([.leading, .trailing], 12)
            .frame(maxHeight: .infinity, alignment: .center)
            .foregroundStyle(.white)
            .background(.blue)
            .onTapGesture {
                toggle.toggle()
            }
            Picker("Picker", selection: $selection) {
                ForEach(strings, id: \.self){
                    Text($0)
                }
            }
            .padding(.leading, 20)
            .padding([.top, .bottom], /*System Top and Bottom List Row Insets*/ ) /*<---- Here*/
        }
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 20))
//20 is what I think the default is usually for this trailing edge
    }
}

This is then placed in a form like so

struct ContentView: View {
    
    @State var string: String = "string"
    @State var options: [String] = ["string", "1", "2"]
    @State var toggle: Bool = false
    @State var userInput: String = ""
    
    var body: some View {
        Form{
            PickerWithButton(selection: $string, strings: $options, toggle: $toggle)
                .alert("Alert Title", isPresented: $toggle){
                    TextField("Example Text", text: $userInput)
                    Button("Add", role: .cancel) {
                        string = userInput
                        options.append(userInput)
                        options.sort()
                        userInput = ""
                    }
                    Button ("Cancel", role: .destructive) {
                        userInput = ""
                    }
                }
        }
    }
}

At different font sizes the listRowInsets appear to expand and so hardcoding values in for the .padding means that only at the standard size does this view appear to be consistent with the other items in the form.

How could I calculate or be told by the system what the listRowInsets are or does anyone know another way of handling this issue?

I have tried googling how to use EdgeInsets and I have tried using Geometry Reader but to no avail.

This is what the picker with button and picker look like in a form using the default text size. The rows are the same height.

And here are both rows with the XXLarge text size, note how the rows are different heights.

Thank You

For transparency I have also posted this on Reddit

https://www.reddit.com/r/swift/comments/1drm4ge/how_can_i_get_the_listrowinsets_to_create/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button