update margins in benefits pages

Author: wbglaeser

src/ui/screens/benefit-page/BenefitPageScreen.js

@@ -26,7 +26,7 @@ const BenefitPageScreen = ({
             <AppScreenWrapperContainer backTarget={'/eligibility-overview'}>
                 <VBox sx={{ gap: { xs: 4, md: 8 } }}>
                     <BenefitPageHeader id={id} benefit={benefitPageData} validatedStatus={validatedStatus} categoryTitles={categoryTitles} />
-                    <VBox sx={{ gap: { xs: 4, md: 8 } }}>
+                    <VBox sx={{ gap: { xs: 4, md: 8 }}}>
                         <BenefitPageGeneral t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} />
                         <BenefitPageApplication t={t} isDesktop={isDesktop} benefitPageData={benefitPageData} xml={xml} />
                         {

src/ui/screens/benefit-page/components/BenefitPageApplication.js

@@ -19,7 +19,7 @@ const BenefitPageApplication = ({
     <VBox
       sx={{
         backgroundColor: 'white.main',
-        padding: '32px',
+        padding: { xs: '32px 20px', md: '32px' },
         borderRadius: theme.shape.borderRadius,
         boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
         gap: 4,

src/ui/screens/benefit-page/components/BenefitPageGeneral.js

@@ -12,7 +12,7 @@ const BenefitPageGeneral = ({ t, benefitPageData, isDesktop }) => {
     <VBox
       sx={{
         backgroundColor: 'white.main',
-        padding: '32px',
+        padding: { xs: '32px 20px', md: '32px' },
         borderRadius: theme.shape.borderRadius,
         boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
         gap: 2,

src/ui/screens/benefit-page/components/BenefitPageLocal.js

@@ -11,7 +11,7 @@ const BenefitPageLocal = ({ t, isDesktop, localisedData }) => {
         <VBox
             sx={{
                 backgroundColor: 'white.main',
-                padding: '32px',
+                padding: { xs: '32px 20px', md: '32px' },
                 borderRadius: theme.shape.borderRadius,
                 boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
                 gap: 4,

src/ui/screens/benefit-page/components/BenefitPageRequirements.js

@@ -15,7 +15,7 @@ const BenefitPageRequirements = ({ t, isDesktop, evalGraph, benefitPageData }) =
             sx={{
                 gap: 4,
                 backgroundColor: 'white.main',
-                padding: '32px',
+                padding: { xs: '32px 20px', md: '32px' },
                 borderRadius: theme.shape.borderRadius,
             }}
         >