How to prevent Shapes in ZStack from changing other views frame?

I have four Shapes placed in background using ZStack. I placed two buttons and one toggle in a layer above. In portrait mode the toggle is rendered offscreen as shown in the view hierarchy. By commenting out the shapes it becomes clear, that the orange circle and the bigger rectangle are creating this effect.

How can I create a background with shapes that might be bigger than the screen bounds while having layers above unaffected by this?

The code can be found here: https://gitlab.com/vikingosegundo/button-and-toggle-styles

struct GlassmorphismButtons: View {
    @State private var isToggled = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color.cyan.opacity(0.7), Color.purple.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing).edgesIgnoringSafeArea(.all)
            ZStack {
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .frame(width: 300, height: 300)
                    .foregroundStyle(LinearGradient(colors: [.indigo, .teal], startPoint: .top, endPoint: .leading))
                    .offset(.init(width: -100, height: 100))
                    .rotationEffect(.degrees(15))
                    .blur(radius: 5)

                Circle()
                    .frame(width: 300)
                    .foregroundColor(Color.blue)
                    .offset(x: -100, y: -150)
                    .blur(radius: 5)

               RoundedRectangle(cornerRadius: 30, style: .continuous)
                   .frame(width: 500, height: 500)
                   .foregroundStyle(LinearGradient(colors: [.purple, .mint], startPoint: .top, endPoint: .leading))
                   .offset(x: 300)
                   .rotationEffect(.degrees(30))
                   .blur(radius: 5)

               Circle()
                   .frame(width: 450)
                   .foregroundStyle(Color.orange)
                   .offset(x: 120, y: -200)
                   .blur(radius: 5)
            }
            VStack {
                VStack {
                    HStack {
                        Button {
                            print("button clicked")
                        } label: {
                            Text("Click me")
                        }.buttonStyle(FrostedGlassButtonStyle())

                        Button {
                            print("button clicked")
                        } label: {
                            Image(systemName: "heart.fill")
                        }.buttonStyle(FrostedGlassButtonStyle())
                    }
                }
                HStack {
                    Toggle(isOn: $isToggled) {
                        Text("Toggle")
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            GlassmorphismButtons()
                .tabItem { Label("Glassmorphism", systemImage: "list.dash") }
            NeumorphismButtons()
                .tabItem { Label("Neumorphism", systemImage: "list.dash") }
        }
    }
}

#Preview {
    ContentView()
}

>Solution :

Use containerRelativeFrame on the VStack (the thing that you want to fit inside the screen).

VStack {
    VStack { ... }
    HStack { ... }
}
.containerRelativeFrame(.horizontal)

You can also add .vertical if this is a problem vertically too.