fix: add different padding for edit vs preview mode

opengovsg · Feb 22, 2024 · 136c334 · 136c334
1 parent 0577fb1
commit 136c334
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 16 deletions.
diff --git a/frontend/src/features/admin-form/create/end-page/PaymentEndPageBlock.tsx b/frontend/src/features/admin-form/create/end-page/PaymentEndPageBlock.tsx
@@ -57,7 +57,7 @@ export const PaymentEndPageBlock = ({
   )
 
   return (
-    <Box mx={{ base: '1rem', md: '4rem' }}>
+    <Box>
       <Box ref={focusRef} bg="white">
         <VisuallyHidden aria-live="assertive">
           {submittedAriaText}

diff --git a/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx b/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx
@@ -31,23 +31,21 @@ export const PaymentEndPagePreview = ({
         </Box>
         <Stack
           pt={{ base: '1rem', md: '1.5rem' }}
-          mx={{ base: '1rem', md: '2rem' }}
+          px={{ base: '1rem', md: '4rem' }}
           bg="transparent"
-          width="100%"
+          w="100%"
         >
-          <PaymentEndPageBlock {...endPageProps} />
-          <Stack px={{ base: '1rem', md: '4rem' }} bg="transparent">
-            {isFeedbackSubmitted ? null : (
-              <Box
-                backgroundColor="white"
-                p="2rem"
-                py={{ base: '1.5rem', md: '2rem' }}
-                px={{ base: '1rem', md: '2rem' }}
-              >
-                <FeedbackBlock onSubmit={handleSubmitFeedback} />
-              </Box>
-            )}
-          </Stack>
+          <PaymentEndPageBlock focusOnMount {...endPageProps} />
+          {isFeedbackSubmitted ? null : (
+            <Box
+              backgroundColor="white"
+              p="2rem"
+              py={{ base: '1.5rem', md: '2rem' }}
+              px={{ base: '1rem', md: '2rem' }}
+            >
+              <FeedbackBlock onSubmit={handleSubmitFeedback} />
+            </Box>
+          )}
         </Stack>
       </Flex>
     </>