Move modal content into overlay for self-sizing for work

For unknown reason, ZStack prevents some behavior of self-sizing and frame-size reporting. I tried various combinations to measure parent size frame but the culprit was putting modal into a ZStack. Moving content into overlay removed previous issues.

Author: staskus

WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift

@@ -8,42 +8,41 @@ struct POSRootModalViewModifier: ViewModifier {
     private let scaleTransitionAmount = Constants.scaleTransitionAmount
 
     func body(content: Content) -> some View {
-        ZStack {
-            content
-                .blur(radius: modalManager.isPresented ? 8 : 0)
-                .disabled(modalManager.isPresented)
-                .accessibilityElement(children: modalManager.isPresented ? .ignore : .contain)
-
-            if modalManager.isPresented {
-                Color.posSurfaceDim.opacity(0.8)
-                    .edgesIgnoringSafeArea(.all)
-                    .onTapGesture {
-                        if modalManager.allowsInteractiveDismissal {
-                            modalManager.dismiss()
+        content
+            .blur(radius: modalManager.isPresented ? 8 : 0)
+            .disabled(modalManager.isPresented)
+            .accessibilityElement(children: modalManager.isPresented ? .ignore : .contain)
+            .measureFrame { frame in
+                updateModalParentSize(with: frame.size)
+            }
+            .overlay {
+                if modalManager.isPresented {
+                    Color.posSurfaceDim.opacity(0.8)
+                        .edgesIgnoringSafeArea(.all)
+                        .onTapGesture {
+                            if modalManager.allowsInteractiveDismissal {
+                                modalManager.dismiss()
+                            }
                         }
+                    // Don't scale/fade in the backdrop
+                        .animation(nil, value: modalManager.isPresented)
+                    ZStack {
+                        modalManager.getContent()
+                            .environment(\.posModalParentSize, modalParentSize)
+                            .background(Color.posSurfaceBright)
+                            .cornerRadius(POSCornerRadiusStyle.extraLarge.value)
+                            .posShadow(.large, cornerRadius: POSCornerRadiusStyle.extraLarge.value)
+                            .padding()
                     }
-                // Don't scale/fade in the backdrop
-                    .animation(nil, value: modalManager.isPresented)
-                ZStack {
-                    modalManager.getContent()
-                        .environment(\.posModalParentSize, modalParentSize)
-                        .background(Color.posSurfaceBright)
-                        .cornerRadius(POSCornerRadiusStyle.extraLarge.value)
-                        .posShadow(.large, cornerRadius: POSCornerRadiusStyle.extraLarge.value)
-                        .padding()
+                    .zIndex(1)
+                    // Unfortunately combined doesn't work on removal.
+                    // The extra ZStack prevents changing modalContent from scaling and fading, but the ZIndex needs to be
+                    // consistent even when animating out, which it wouldn't be if unspecified.
+                    .transition(.scale(scale: scaleTransitionAmount).combined(with: .opacity))
                 }
-                .zIndex(1)
-                // Scale the modal container in and out, fading appropriately.
-                // Unfortunately combined doesn't work on removal.
-                // The extra ZStack prevents changing modalContent from scaling and fading, but the ZIndex needs to be
-                // consistent even when animating out, which it wouldn't be if unspecified.
-                .transition(.scale(scale: scaleTransitionAmount).combined(with: .opacity))
             }
-        }
-        .measureFrame { frame in
-            updateModalParentSize(with: frame.size)
-        }
-        .animation(.easeInOut(duration: animationDuration), value: modalManager.isPresented)
+            .animation(.easeInOut(duration: animationDuration), value: modalManager.isPresented)
+            .ignoresSafeArea()
     }
 
     private func updateModalParentSize(with size: CGSize) {