Fix layout to keep modal corner radius visible during scroll

Author: toupper

WooCommerce/Classes/ViewRelated/Orders/Order Creation/PaymentSection/Taxes/TaxEducationalDialogView.swift

@@ -16,31 +16,34 @@ struct TaxEducationalDialogView: View {
         ZStack {
             Color.black.opacity(Layout.backgroundOpacity).edgesIgnoringSafeArea(.all)
 
-                VStack {
-                    GeometryReader { geometry in
-                        ScrollView {
-                            VStack(alignment: .center, spacing: Layout.verticalSpacing) {
-                                Text(Localization.title)
-                                    .headlineStyle()
-                                Text(Localization.bodyFirstParagraph)
-                                    .bodyStyle()
-                                    .fixedSize(horizontal: false, vertical: true)
-                                Text(Localization.bodySecondParagraph)
-                                    .bodyStyle()
+            VStack {
+                GeometryReader { geometry in
+                    VStack(spacing: 0) {
+                        VStack {
+                            ScrollView {
+                                VStack(alignment: .center, spacing: Layout.verticalSpacing) {
+                                    Text(Localization.title)
+                                        .headlineStyle()
 
+                                    Text(Localization.bodyFirstParagraph)
+                                        .bodyStyle()
+                                        .fixedSize(horizontal: false, vertical: true)
 
-                                VStack(alignment: .leading, spacing: Layout.verticalSpacing) {
-                                    Divider()
-                                        .frame(height: Layout.dividerHeight)
-                                        .foregroundColor(Color(.opaqueSeparator))
-                                    if let taxBasedOnSettingExplanatoryText = viewModel.taxBasedOnSettingExplanatoryText {
-                                        Text(taxBasedOnSettingExplanatoryText)
-                                            .bodyStyle()
-                                            .fixedSize(horizontal: false, vertical: true)
-                                    }
+                                    Text(Localization.bodySecondParagraph)
+                                        .bodyStyle()
+
+                                    VStack(alignment: .leading, spacing: Layout.verticalSpacing) {
+                                        Divider()
+                                            .frame(height: Layout.dividerHeight)
+                                            .foregroundColor(Color(.opaqueSeparator))
+
+                                        if let explanatoryText = viewModel.taxBasedOnSettingExplanatoryText {
+                                            Text(explanatoryText)
+                                                .bodyStyle()
+                                                .fixedSize(horizontal: false, vertical: true)
+                                        }
 
-                                    ForEach(viewModel.taxLines, id: \.title) { taxLine in
-                                        HStack {
+                                        ForEach(viewModel.taxLines, id: \.title) { taxLine in
                                             AdaptiveStack(horizontalAlignment: .leading, spacing: Layout.taxLinesInnerSpacing) {
                                                 Text(taxLine.title)
                                                     .font(.body)
@@ -55,50 +58,56 @@ struct TaxEducationalDialogView: View {
                                                     .frame(width: nil, alignment: .trailing)
                                             }
                                         }
+
+                                        Divider()
+                                            .frame(height: Layout.dividerHeight)
+                                            .foregroundColor(Color(.opaqueSeparator))
                                     }
-                                    Divider()
-                                        .frame(height: Layout.dividerHeight)
-                                        .foregroundColor(Color(.opaqueSeparator))
-                                }.renderedIf(viewModel.taxLines.isNotEmpty)
+                                    .renderedIf(viewModel.taxLines.isNotEmpty)
 
-                                Button {
-                                    viewModel.onGoToWpAdminButtonTapped()
-                                    showingWPAdminWebview = true
-                                } label: {
-                                    Label {
-                                        Text(Localization.editTaxRatesInAdminButtonTitle)
-                                            .font(.body)
-                                            .fontWeight(.bold)
-                                    } icon: {
-                                        Image(systemName: "arrow.up.forward.square")
-                                            .resizable()
-                                            .frame(width: Layout.externalLinkImageSize * scale, height: Layout.externalLinkImageSize * scale)
+                                    Button {
+                                        viewModel.onGoToWpAdminButtonTapped()
+                                        showingWPAdminWebview = true
+                                    } label: {
+                                        Label {
+                                            Text(Localization.editTaxRatesInAdminButtonTitle)
+                                                .font(.body)
+                                                .fontWeight(.bold)
+                                        } icon: {
+                                            Image(systemName: "arrow.up.forward.square")
+                                                .resizable()
+                                                .frame(width: Layout.externalLinkImageSize * scale,
+                                                       height: Layout.externalLinkImageSize * scale)
+                                        }
                                     }
-                                }
-                                .buttonStyle(PrimaryButtonStyle())
-                                .safariSheet(isPresented: $showingWPAdminWebview, url: viewModel.wpAdminTaxSettingsURL, onDismiss: {
-                                    onDismissWpAdminWebView()
-                                    showingWPAdminWebview = false
-                                })
+                                    .buttonStyle(PrimaryButtonStyle())
+                                    .safariSheet(
+                                        isPresented: $showingWPAdminWebview,
+                                        url: viewModel.wpAdminTaxSettingsURL,
+                                        onDismiss: {
+                                            onDismissWpAdminWebView()
+                                            showingWPAdminWebview = false
+                                        })
 
-                                Button {
-                                    dismiss()
-                                } label: {
-                                    Text(Localization.doneButtonTitle)
+                                    Button {
+                                        dismiss()
+                                    } label: {
+                                        Text(Localization.doneButtonTitle)
+                                    }
+                                    .buttonStyle(SecondaryButtonStyle())
                                 }
-                                .buttonStyle(SecondaryButtonStyle())
+                                .padding(Layout.outterPadding)
                             }
-                            .padding(Layout.outterPadding)
-                            .frame(maxWidth: .infinity, alignment: .center)
-                            .background(Color(.systemBackground))
-                            .cornerRadius(Layout.cornerRadius)
-                            .frame(width: geometry.size.width)      // Make the scroll view full-width
-                            .frame(minHeight: geometry.size.height)
                         }
+                        .background(Color(.systemBackground))
+                        .cornerRadius(Layout.cornerRadius)
+                        .padding(Layout.outterPadding)
+                        .frame(maxWidth: .infinity, alignment: .center)
+                        .frame(minHeight: geometry.size.height)
+                        .frame(width: geometry.size.width)
+                    }
                 }
             }
-            .padding(Layout.outterPadding)
-            .frame(maxWidth: .infinity, alignment: .center)
         }
     }
 }