fix: correct alignment issues in preview mode (#7109)

* fix: correct alignment issues in preview mode * fix: add different padding for edit vs preview mode
opengovsg · Feb 22, 2024 · 7e1b9c8 · 7e1b9c8
1 parent 87dc252
commit 7e1b9c8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 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/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx b/...tend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx
@@ -31,8 +31,9 @@ export const PaymentEndPagePreview = ({
         </Box>
         <Stack
           pt={{ base: '1rem', md: '1.5rem' }}
-          mx={{ base: '1rem', md: '2rem' }}
+          px={{ base: '1rem', md: '4rem' }}
           bg="transparent"
+          w="100%"
         >
           <PaymentEndPageBlock focusOnMount {...endPageProps} />
           {isFeedbackSubmitted ? null : (