From 3f97b1bfc1f96b424e9551560b2e091b75bad080 Mon Sep 17 00:00:00 2001
From: zachery with an e <45150570+zweatshirt@users.noreply.github.com>
Date: Thu, 21 May 2026 09:03:29 -0500
Subject: [PATCH] Add dividers to enhance layout in ReimbursableExpensesStep,
 SummaryReportStep, and SupportItemStep components

---
 .../ReimbursableExpenses/ReimbursableExpensesStep.tsx         | 1 +
 src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx  | 3 ++-
 .../PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx     | 4 +++-
 .../HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx | 4 +++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/HrTools/PdsGoalCalculator/ReimbursableExpenses/ReimbursableExpensesStep.tsx b/src/components/HrTools/PdsGoalCalculator/ReimbursableExpenses/ReimbursableExpensesStep.tsx
index a61f08b83a..6391563745 100644
--- a/src/components/HrTools/PdsGoalCalculator/ReimbursableExpenses/ReimbursableExpensesStep.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/ReimbursableExpenses/ReimbursableExpensesStep.tsx
@@ -20,6 +20,7 @@ export const ReimbursableExpensesStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <MonthlyReimbursableSection />
       <Divider sx={{ mx: -4, my: 4 }} />
       <AnnualReimbursableSection />
diff --git a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
index 83d60fd6fd..a0ac1a2fba 100644
--- a/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/Setup/SetupStep.tsx
@@ -134,7 +134,7 @@ export const SetupStep: React.FC = () => {
         label={t('Goal Name')}
       />
 
-      <Divider sx={{ my: 4, mx: -4 }} />
+      <Divider sx={{ mx: -4, my: 4 }} />
 
       <Box pb={4}>
         <Typography variant="h6">{t('Calculator Setup')}</Typography>
@@ -333,6 +333,7 @@ export const SetupStep: React.FC = () => {
           </Grid>
         </Grid>
       </Card>
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };
diff --git a/src/components/HrTools/PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx b/src/components/HrTools/PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx
index cba5db5c82..24f5eecc01 100644
--- a/src/components/HrTools/PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/SummaryReport/SummaryReportStep.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import Loading from 'src/components/Loading';
 import { useAccountListId } from 'src/hooks/useAccountListId';
@@ -32,7 +32,9 @@ export const SummaryReportStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <PdsSummaryTable supportRaised={supportRaised} />
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };
diff --git a/src/components/HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx b/src/components/HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx
index a0fb4d2dfb..5126bc0ac6 100644
--- a/src/components/HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx
+++ b/src/components/HrTools/PdsGoalCalculator/SupportItem/SupportItemStep.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { OtherSection } from './OtherSection';
 import { SalarySection } from './SalarySection';
@@ -19,8 +19,10 @@ export const SupportItemStep: React.FC = () => {
           )}
         </Typography>
       </Box>
+      <Divider sx={{ mx: -4, my: 4 }} />
       <SalarySection />
       <OtherSection />
+      <Divider sx={{ mx: -4, my: 4 }} />
     </>
   );
 };