fix: text alignment issues in preview mode

opengovsg · Feb 22, 2024 · abc1db4 · abc1db4
1 parent ef3e717
commit abc1db4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx b/frontend/src/features/admin-form/common/components/PreviewFormBanner/PreviewFormBanner.tsx
@@ -47,7 +47,7 @@ interface PreviewFormBannerProps {
 const textProps: TextProps = {
   textStyle: 'body-2',
   color: 'white',
-  ml: '2rem',
+  mx: '2rem',
   mt: '0.5rem',
   mb: '0.5rem',
 }

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>
+    <Box mx={{ base: '1.5rem', md: '0' }}>
       <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
@@ -33,18 +33,21 @@ export const PaymentEndPagePreview = ({
           pt={{ base: '1rem', md: '1.5rem' }}
           mx={{ base: '1rem', md: '2rem' }}
           bg="transparent"
+          width="100%"
         >
-          <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>
-          )}
+          <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>
         </Stack>
       </Flex>
     </>