#1650 - address comments/ tests?

Author: RChandler234

src/frontend/src/layouts/PageTitle/PageTitle.tsx

@@ -41,11 +41,15 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, chips, previousPages, head
         bgcolor={theme.palette.background.default}
       >
         <Grid container>
-          <Grid item xs={6} md={tabs ? 4 : 8} display="flex" alignItems={'center'}>
-            <Typography variant="h4" fontSize={30}>
-              {title}
-            </Typography>
-            {chips}
+          <Grid container item xs={6} md={tabs ? 4 : 8} display="flex" alignItems={'center'} rowGap={2}>
+            <Grid item xs={12} md={chips ? 4.2 : 12}>
+              <Typography variant="h4" fontSize={30}>
+                {title}
+              </Typography>
+            </Grid>
+            <Grid item xs={chips ? 12 : 0} md={chips ? 6 : 0}>
+              {chips}
+            </Grid>
           </Grid>
           <Grid item xs={0} md={tabs ? 4 : 0} sx={{ display: { xs: 'none', md: 'block' } }}>
             {tabs}

src/frontend/src/pages/ChangeRequestDetailPage/ActivationDetails.tsx

@@ -18,18 +18,18 @@ interface ActivationDetailsProps {
 
 const ActivationDetails: React.FC<ActivationDetailsProps> = ({ cr }) => {
   return (
-    <Grid container rowSpacing={'10px'} mb="10px">
-      <Grid item xs={6} md={3}>
+    <Grid container rowSpacing={'10px'} mb="40px">
+      <Grid item xs={6} md={6}>
         <InfoBlock title={'Project Lead'} icon={<HandymanIcon />}>
           <Typography>{fullNamePipe(cr.projectLead)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={3}>
+      <Grid item xs={6} md={6}>
         <InfoBlock title={'Project Manager'} icon={<WorkIcon />}>
           <Typography>{fullNamePipe(cr.projectManager)}</Typography>
         </InfoBlock>
       </Grid>
-      <Grid item xs={6} md={3}>
+      <Grid item xs={6} md={6}>
         <InfoBlock title={'Start Date'} icon={<CalendarTodayIcon />}>
           <Typography>{datePipe(cr.startDate)}</Typography>
         </InfoBlock>

src/frontend/src/pages/ChangeRequestDetailPage/ChangeRequestDetailsView.tsx

@@ -72,11 +72,13 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
   const isStandard =
     changeRequest.type !== ChangeRequestType.Activation && changeRequest.type !== ChangeRequestType.StageGate;
 
+  const isActivation = changeRequest.type === ChangeRequestType.Activation;
+
   return (
     <PageLayout
       title={`Change Request #${changeRequest.crId}`}
       chips={
-        <Box display="flex" mx="20px" gap="20px">
+        <Box display="flex" gap="20px">
           <ChangeRequestTypePill type={changeRequest.type} />
           <ChangeRequestStatusPill status={changeRequest.status} />
         </Box>
@@ -111,21 +113,23 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
             </Typography>
           </Grid>
         </Grid>
-        <Grid container rowSpacing={2} columnSpacing={2}>
-          <Grid container item xs={isStandard ? 7 : 12}>
+        <Grid container rowSpacing={2}>
+          <Grid container rowSpacing={1} item xs={isStandard ? 7 : isActivation ? 6 : 12}>
             {buildDetails(changeRequest)}
-            <Grid item md={isStandard ? 12 : 5}>
+            <Grid item md={isStandard ? 12 : isActivation ? 12 : 5}>
               <ReviewNotes
                 reviewer={changeRequest.reviewer}
                 reviewNotes={changeRequest.reviewNotes}
                 dateReviewed={changeRequest.dateReviewed}
               />
             </Grid>
-            <Grid item md={isStandard ? 12 : 6}>
-              <ImplementedChangesList
-                changes={changeRequest.implementedChanges || []}
-                overallDateImplemented={changeRequest.dateImplemented}
-              />
+            <Grid item md={isStandard ? 12 : isActivation ? 0 : 6}>
+              {!isActivation && (
+                <ImplementedChangesList
+                  changes={changeRequest.implementedChanges || []}
+                  overallDateImplemented={changeRequest.dateImplemented}
+                />
+              )}
             </Grid>
           </Grid>
           <Grid item xs={isStandard ? 5 : 0}>
@@ -137,6 +141,14 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
               />
             )}
           </Grid>
+          <Grid item xs={isActivation ? 6 : 0}>
+            {isActivation && (
+              <ImplementedChangesList
+                changes={changeRequest.implementedChanges || []}
+                overallDateImplemented={changeRequest.dateImplemented}
+              />
+            )}
+          </Grid>
         </Grid>
       </Grid>