fix: payment modal header overlaps (#6737)

fix: reduce width size of modal header
opengovsg · Sep 20, 2023 · 9862b60 · 9862b60
1 parent f8fa1ec
commit 9862b60
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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.