headerRight button misaligned

Question

I am having trouble aligning the headerRight consistently across Screens.

I have a StackNavigator with a nested TabNavigator:

const Tabs = ({navigation}) => {
  return (
    <Tab.Navigator
      screenOptions={{
        headerRight: () => (
          <View style={{backgroundColor: 'red'}}>
            <IconButton icon="account" onPress={navigation.navigate('Profile')}/>
          </View>
        ),
      }}>
      <Tab.Screen name="Home" component={Screens.Home}/>
      <Tab.Screen ... />
    </Tab.Navigator>

    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        {!auth.user ? (
          <Stack.Screen name="Login" component={Screens.Login} />
        ) : (
          <>
            <Stack.Screen name="Tabs" component={Tabs} />
            <Stack.Screen
              name="Profile"
              component={Screens.Profile}
              options={({navigation}) => ({
                headerShown: true,
                headerRight: () => (
                  <View style={{backgroundColor: 'red'}}>
                    <IconButton icon="close" onPress={navigation.goBack()}/>
                  </View>
                ),
              })}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>

Here are 2 screenshots showing the header buttons, the first is the <Stack.Screen name="Profile"> and the second is the <Tab.Screen name="Home">:

As you navigate between the 2 screens the top right button jumps right to left because of the spacing to the right of the button on the Profile Screen.

I have tried moving items around (screens, nesting, options vs screenOptions...), and tried other options and screenOptions but have not had any luck.

It seems like a StackScreen has padding whereas the TabScreen does not.

Any ideas here?