From 9862b602bb5162fb880bc382f23f9c4fbdadfa9f Mon Sep 17 00:00:00 2001
From: Foo Chi Fa <59867455+foochifa@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:40:55 +0800
Subject: [PATCH] fix: payment modal header overlaps (#6737)

fix: reduce width size of modal header
---
 .../DuplicatePaymentModal/DuplicatePaymentModal.tsx           | 4 +++-
 .../components/FormPaymentModal/FormPaymentModal.tsx          | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/public-form/components/DuplicatePaymentModal/DuplicatePaymentModal.tsx b/frontend/src/features/public-form/components/DuplicatePaymentModal/DuplicatePaymentModal.tsx
index 38be7fc423..f9a9ee6ead 100644
--- a/frontend/src/features/public-form/components/DuplicatePaymentModal/DuplicatePaymentModal.tsx
+++ b/frontend/src/features/public-form/components/DuplicatePaymentModal/DuplicatePaymentModal.tsx
@@ -50,7 +50,9 @@ export const DuplicatePaymentModal = ({
         <ModalOverlay />
         <ModalContent>
           <ModalCloseButton />
-          <ModalHeader pb={'2rem'}>Proceed to pay again?</ModalHeader>
+          <ModalHeader pb={'2rem'} w="90%">
+            Proceed to pay again?
+          </ModalHeader>
           <ModalBody flexGrow={0}>
             <Stack>
               <Text>
diff --git a/frontend/src/features/public-form/components/FormPaymentModal/FormPaymentModal.tsx b/frontend/src/features/public-form/components/FormPaymentModal/FormPaymentModal.tsx
index 3f3a55ffde..7f85855ee4 100644
--- a/frontend/src/features/public-form/components/FormPaymentModal/FormPaymentModal.tsx
+++ b/frontend/src/features/public-form/components/FormPaymentModal/FormPaymentModal.tsx
@@ -40,7 +40,9 @@ export const FormPaymentModal = ({
         <ModalOverlay />
         <ModalContent>
           <ModalCloseButton />
-          <ModalHeader pb={'2rem'}>You are about to make payment</ModalHeader>
+          <ModalHeader pb={'2rem'} w="90%">
+            You are about to make payment
+          </ModalHeader>
           <ModalBody flexGrow={0}>
             Please ensure that your form information is accurate. You will not
             be able to edit your form after you proceed.