[iPadOS 26][Woo POS] Flexible width and height for card present modals (#16104)

staskus · web-flow · commit ed08dcdca777 · 2025-09-09T15:11:51.000+03:00
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift
@@ -29,13 +29,13 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {
                 .fixedSize(horizontal: false, vertical: true)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.openSettingsButtonViewModel.title,
                    action: viewModel.openSettingsButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.dismissButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                               accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedLocationRequiredAlertView: V
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.primaryButtonViewModel.title,
                    action: viewModel.primaryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift
@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift
@@ -31,13 +31,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {
                 .fixedSize(horizontal: false, vertical: true)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift
@@ -24,7 +24,6 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
                 }
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.connectButton.title,
@@ -37,6 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelSearchButton.actionHandler,
                              accessibilityLabel: viewModel.cancelSearchButton.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift
@@ -23,13 +23,13 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedView: View {
                     .matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)
             }
             .frame(maxWidth: .infinity)
-            .scrollVerticallyIfNeeded()
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
             .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
+        .scrollVerticallyIfNeeded()
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
                              accessibilityLabel: viewModel.cancelButtonViewModel.title)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalSizing.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalSizing.swift
@@ -9,6 +9,7 @@ extension View {
 
 struct POSModalSizing: ViewModifier {
     @Environment(\.sizeCategory) private var sizeCategory
+    @Environment(\.posModalParentSize) private var parentSize
 
     func body(content: Content) -> some View {
         content
@@ -19,6 +20,10 @@ struct POSModalSizing: ViewModifier {
 
 private extension POSModalSizing {
     var frameWidth: CGFloat {
+        return min(preferredFrameWidth, maxAvailableFrameWidth)
+    }
+
+    var preferredFrameWidth: CGFloat {
         switch sizeCategory {
         case .extraSmall, .small:
             return 560
@@ -37,7 +42,15 @@ private extension POSModalSizing {
         }
     }
 
+    var maxAvailableFrameWidth: CGFloat {
+        return parentSize.width
+    }
+
     var frameHeight: CGFloat {
+        return min(preferredFrameHeight, maxAvailableFrameHeight)
+    }
+
+    var preferredFrameHeight: CGFloat {
         switch sizeCategory {
         case .extraSmall, .small:
             return 640
@@ -56,6 +69,10 @@ private extension POSModalSizing {
         }
     }
 
+    var maxAvailableFrameHeight: CGFloat {
+        parentSize.height
+    }
+
     var windowBounds: CGRect {
         window?.bounds ?? UIScreen.main.bounds
     }
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift
@@ -8,42 +8,42 @@ 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)
+                    // 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))
                 }
-                .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) {

Original file line number	Diff line number	Diff line change
`@@ -29,13 +29,13 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {`
`29`	`29`	`.fixedSize(horizontal: false, vertical: true)`
`30`	`30`	`}`
`31`	`31`	`.frame(maxWidth: .infinity)`
`32`		`- .scrollVerticallyIfNeeded()`
`33`	`32`
`34`	`33`	`Button(viewModel.openSettingsButtonViewModel.title,`
`35`	`34`	`action: viewModel.openSettingsButtonViewModel.actionHandler)`
`36`	`35`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`37`	`36`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`38`	`37`	`}`
	`38`	`+ .scrollVerticallyIfNeeded()`
`39`	`39`	`.posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,`
`40`	`40`	`accessibilityLabel: viewModel.dismissButtonViewModel.title)`
`41`	`41`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -24,13 +24,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`.frame(maxWidth: .infinity)`
`27`		`- .scrollVerticallyIfNeeded()`
`28`	`27`
`29`	`28`	`Button(viewModel.retryButtonViewModel.title,`
`30`	`29`	`action: viewModel.retryButtonViewModel.actionHandler)`
`31`	`30`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`32`	`31`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`33`	`32`	`}`
	`33`	`+ .scrollVerticallyIfNeeded()`
`34`	`34`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`35`	`35`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`36`	`36`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -31,13 +31,13 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {`
`31`	`31`	`.fixedSize(horizontal: false, vertical: true)`
`32`	`32`	`}`
`33`	`33`	`.frame(maxWidth: .infinity)`
`34`		`- .scrollVerticallyIfNeeded()`
`35`	`34`
`36`	`35`	`Button(viewModel.retryButtonViewModel.title,`
`37`	`36`	`action: viewModel.retryButtonViewModel.actionHandler)`
`38`	`37`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`39`	`38`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`40`	`39`	`}`
	`40`	`+ .scrollVerticallyIfNeeded()`
`41`	`41`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`42`	`42`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`43`	`43`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,6 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`	`.frame(maxWidth: .infinity)`
`27`		`- .scrollVerticallyIfNeeded()`
`28`	`27`
`29`	`28`	`VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {`
`30`	`29`	`Button(viewModel.connectButton.title,`
`@@ -37,6 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {`
`37`	`36`	`}`
`38`	`37`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`39`	`38`	`}`
	`39`	`+ .scrollVerticallyIfNeeded()`
`40`	`40`	`.posModalCloseButton(action: viewModel.cancelSearchButton.actionHandler,`
`41`	`41`	`accessibilityLabel: viewModel.cancelSearchButton.title)`
`42`	`42`	`.multilineTextAlignment(.center)`
Original file line number	Diff line number	Diff line change
`@@ -23,13 +23,13 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedView: View {`
`23`	`23`	`.matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)`
`24`	`24`	`}`
`25`	`25`	`.frame(maxWidth: .infinity)`
`26`		`- .scrollVerticallyIfNeeded()`
`27`	`26`
`28`	`27`	`Button(viewModel.retryButtonViewModel.title,`
`29`	`28`	`action: viewModel.retryButtonViewModel.actionHandler)`
`30`	`29`	`.buttonStyle(POSFilledButtonStyle(size: .normal))`
`31`	`30`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`32`	`31`	`}`
	`32`	`+ .scrollVerticallyIfNeeded()`
`33`	`33`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
`34`	`34`	`accessibilityLabel: viewModel.cancelButtonViewModel.title)`
`35`	`35`	`.multilineTextAlignment(.center)`