fix: add different padding for edit vs preview mode

frontend/src/features/admin-form/create/end-page/PaymentEndPageBlock.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react'
-import { Box, VisuallyHidden } from '@chakra-ui/react'
+import { Box, useBreakpointValue, VisuallyHidden } from '@chakra-ui/react'
 
 import {
   AdminStorageFormDto,
@@ -18,12 +18,14 @@ export interface PaymentEndPageBlockProps {
   endPage: FormDto['endPage']
   submissionData: SubmissionData
   focusOnMount?: boolean
+  useLargeMarginX?: boolean
 }
 
 export const PaymentEndPageBlock = ({
   endPage,
   submissionData,
   focusOnMount,
+  useLargeMarginX,
 }: PaymentEndPageBlockProps): JSX.Element => {
   const { data: form } = useAdminForm()
   const focusRef = useRef<HTMLDivElement>(null)
@@ -56,8 +58,12 @@ export const PaymentEndPageBlock = ({
     form as AdminStorageFormDto,
   )
 
+  const mxValue = useLargeMarginX
+    ? { base: '1rem', md: '4rem' }
+    : { base: '1rem', md: '0' }
+
   return (
-    <Box mx={{ base: '1rem', md: '4rem' }}>
+    <Box mx={mxValue}>
       <Box ref={focusRef} bg="white">
         <VisuallyHidden aria-live="assertive">
           {submittedAriaText}

frontend/src/features/public-form/components/FormEndPage/components/PaymentEndPagePreview.tsx

@@ -33,9 +33,9 @@ export const PaymentEndPagePreview = ({
           pt={{ base: '1rem', md: '1.5rem' }}
           mx={{ base: '1rem', md: '2rem' }}
           bg="transparent"
-          width="100%"
+          w="100%"
         >
-          <PaymentEndPageBlock {...endPageProps} />
+          <PaymentEndPageBlock {...endPageProps} useLargeMarginX />
           <Stack px={{ base: '1rem', md: '4rem' }} bg="transparent">
             {isFeedbackSubmitted ? null : (
               <Box