Unintended X-axis layout shift of a Button when sibling views animate and keyboard appears

Hello everyone, My name is Keita Tomizu. I'm a university student in Japan, currently developing a personal app. I am facing a tricky SwiftUI layout issue that I have spent hours trying to solve, and I would really appreciate your insights. Context & Goal: I have an overlay UI layer (zIndex(4)) consisting of a VStack that contains top and bottom HStacks. • In the top-left, there is a back button (<). • In the top-right and bottom-right, there are action buttons. • When a user taps the bottom-right button, a state isShowingAddView becomes true. This brings up a keyboard and a custom view in the background. • My Goal: When isShowingAddView is true, the right-side buttons should scale up and fade out (opacity to 0) in place. The top-left < button should remain completely static and anchored in its exact position. The Issue: When the state toggles, the < button unexpectedly shifts horizontally (along the X-axis) and sometimes behaves erratically, moving off-screen or losing its static position. Also, the animations on the other buttons sometimes break or cancel abruptly. What I've tried: 1. I stopped using if !isShowingAddView to remove views, as I learned it causes the Spacer() to instantly expand and push the < button away. I am now using .opacity, .scaleEffect, and .allowsHitTesting instead. 2. I added .ignoresSafeArea(.keyboard) to the parent VStack to prevent the keyboard from pushing the UI up. Despite these changes, the < button still shifts horizontally during the state transition. Code Snippet: Here is the simplified structure of my overlay layer. (I have omitted the background layers for simplicity).

Code:

import SwiftUI

struct ContentView: View { @State private var isShowingAddView: Bool = false

var body: some View {
    ZStack {
        // Background layers and other views are here...
        
        // Overlay UI Layer
        VStack {
            HStack(alignment: .center) {
                // 1. The Back Button (<) - I want this to stay COMPLETELY fixed.
                Button(action: {
                    if isShowingAddView {
                        withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                            isShowingAddView = false
                        }
                    }
                }) {
                    Image(systemName: "chevron.left")
                        .font(.system(size: 21, weight: .semibold))
                        .foregroundColor(.black)
                        .frame(width: 44, height: 44)
                }
                .background(Color.white.opacity(0.5)) // Simplified glass effect
                .clipShape(Circle())
                
                Spacer() // The spacer that might be causing the X-axis shift?
                
                // 2. The Right Buttons - These fade out and scale up.
                HStack(spacing: 0) {
                    Image(systemName: "circle.hexagongrid.fill").frame(width: 44, height: 44)
                    Spacer().frame(width: 13)
                    Image(systemName: "magnifyingglass").frame(width: 44, height: 44)
                    Spacer().frame(width: 10)
                    Image(systemName: "ellipsis").frame(width: 44, height: 44)
                }
                .foregroundColor(.black)
                .padding(.horizontal, 2)
                .frame(height: 44)
                .background(Color.white.opacity(0.5))
                .clipShape(Capsule())
                // Animation modifiers
                .scaleEffect(isShowingAddView ? 1.15 : 1.0)
                .opacity(isShowingAddView ? 0.0 : 1.0)
                .allowsHitTesting(!isShowingAddView)
                .animation(.spring(response: 0.45, dampingFraction: 0.8), value: isShowingAddView)
            }
            .padding(.horizontal, 16)
            
            Spacer()
            
            // 3. The Bottom Right Button (Plus)
            HStack {
                Spacer()
                Button(action: {
                    withAnimation(.spring(response: 0.45, dampingFraction: 0.8)) {
                        isShowingAddView = true
                    }
                }) {
                    Image(systemName: "plus")
                        .font(.system(size: 23, weight: .regular))
                        .foregroundColor(.black)
                        .frame(width: 48, height: 48)
                }
                .background(Color.white.opacity(0.5))
                .clipShape(Circle())
                // Animation modifiers
                .scaleEffect(isShowingAddView ? 1.15 : 1.0)
                .opacity(isShowingAddView ? 0.0 : 1.0)
                .allowsHitTesting(!isShowingAddView)
                .animation(.spring(response: 0.45, dampingFraction: 0.8), value: isShowingAddView)
            }
            .padding(.horizontal, 28)
            .padding(.bottom, 16)
        }
        .zIndex(4)
        .ignoresSafeArea(.keyboard)
    }
}

}

My Question: How can I completely anchor the < button so it is immune to layout shifts when its sibling views animate (scale/opacity) and when the keyboard appears? Is there a better layout strategy or a concept I am missing to isolate this button's position? Any advice, concepts, or solutions would be deeply appreciated. Thank you!