Navigation bar item tappable area cut when using offset

Question

In SwiftUI, consider this navigation bar:

Here is how the trailing .navigationBarItems are declared:

HStack(spacing: 0) {
    Button(action: {
        self.addListModal = true
    }, label: {
        NavBarImage(image: "plus")
    })
    // more buttons here

Here is the NavBarImage struct:

struct NavBarImage: View {
    var image: String

    var body: some View {
        ZStack {
            Rectangle().foregroundColor(Color.red).frame(width: 40, height: 45)
            Image(systemName: image)
        }
    }
}

The red is there so I can see what SHOULD be the tappable area for each button. This ZStack with a Rectangle idea was introduced to me as a way to make the images easier to tap.

Now, I wanted to shift the items to the right so they are more in line with the list content below. I tried adding an .offset to my HStack:

HStack(spacing: 0) {
    // buttons
}
.offset(x: 15, y: 0)

Which produces this result:

So this looks perfect to me. The problem, however, is the right-most navigation button's tappable area is cut off on the right.

I've illustrated the cutting off of the tappable area in green, here:

The green area of said button no longer registers taps whatsoever.

I've tried using a negative trailing .padding on the HStack instead, and it made no difference. Is there a way I can correct this, perhaps by using some UINavigationBar declaration in the init() of my content view?

Edit:

I just tried adding .accessibility to the Rectangle and the result is the same:

Rectangle().foregroundColor(Color.red)
    .accessibility(label: Text(image))
    .frame(width: 40, height: 45)

Answer 1

Try to use instead

HStack(spacing: 0) {
    // buttons
}
.padding(.trailing, 15)