#1650 - iron out details, make it responsive

Author: RChandler234

src/frontend/src/components/ChangeRequestDetailCard.tsx

@@ -69,7 +69,7 @@ interface ChangeRequestDetailCardProps {
 
 const ChangeRequestDetailCard: React.FC<ChangeRequestDetailCardProps> = ({ changeRequest }) => {
   return (
-    <Card sx={{ width: 325, mr: 2, borderRadius: 3, mb: 2 }}>
+    <Card sx={{ minWidth: 325, maxWidth: 325, mr: 2, borderRadius: 3, mb: 2 }}>
       <CardContent>
         <Grid container justifyContent="space-between" alignItems="flex-start">
           <Grid item xs mb={1} mt={-1.5}>

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

@@ -42,7 +42,7 @@ const PageTitle: React.FC<PageTitleProps> = ({ title, chips, previousPages, head
       >
         <Grid container>
           <Grid container item xs={6} md={tabs ? 4 : 8} display="flex" alignItems={'center'} rowGap={2}>
-            <Grid item xs={12} md={chips ? 4.2 : 12}>
+            <Grid item xs={12} md={chips ? 4 : 12}>
               <Typography variant="h4" fontSize={30}>
                 {title}
               </Typography>

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

@@ -114,16 +114,16 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
           </Grid>
         </Grid>
         <Grid container rowSpacing={2}>
-          <Grid container rowSpacing={1} item xs={isStandard ? 7 : isActivation ? 6 : 12}>
+          <Grid container item xs={12} md={isStandard ? 7 : isActivation ? 6 : 12} height={'fit-content'}>
             {buildDetails(changeRequest)}
-            <Grid item md={isStandard ? 12 : isActivation ? 12 : 5}>
+            <Grid item xs={12} md={isStandard ? 12 : isActivation ? 12 : 5} height={'fit-content'}>
               <ReviewNotes
                 reviewer={changeRequest.reviewer}
                 reviewNotes={changeRequest.reviewNotes}
                 dateReviewed={changeRequest.dateReviewed}
               />
             </Grid>
-            <Grid item md={isStandard ? 12 : isActivation ? 0 : 6}>
+            <Grid item md={isStandard ? 12 : isActivation ? 0 : 6} sx={{ mt: { xs: 2, md: isStandard ? 2 : 0 } }}>
               {!isActivation && (
                 <ImplementedChangesList
                   changes={changeRequest.implementedChanges || []}
@@ -132,7 +132,7 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
               )}
             </Grid>
           </Grid>
-          <Grid item xs={isStandard ? 5 : 0}>
+          <Grid item xs={isStandard ? 12 : 0} md={isStandard ? 5 : 0}>
             {isStandard && (
               <ProposedSolutionsList
                 proposedSolutions={(changeRequest as StandardChangeRequest).proposedSolutions}
@@ -141,7 +141,7 @@ const ChangeRequestDetailsView: React.FC<ChangeRequestDetailsProps> = ({
               />
             )}
           </Grid>
-          <Grid item xs={isActivation ? 6 : 0}>
+          <Grid item xs={isActivation ? 12 : 0} md={isActivation ? 6 : 0}>
             {isActivation && (
               <ImplementedChangesList
                 changes={changeRequest.implementedChanges || []}

src/frontend/src/pages/ChangeRequestDetailPage/ProposedSolutionsList.tsx

@@ -29,6 +29,7 @@ const ProposedSolutionsList: React.FC<ProposedSolutionsListProps> = ({ proposedS
   const { isLoading, isError, error, mutateAsync } = useCreateProposeSolution();
   const toast = useToast();
   const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
 
   if (isLoading) return <LoadingIndicator />;
   if (isError) return <ErrorPage message={error?.message} />;
@@ -91,10 +92,10 @@ const ProposedSolutionsList: React.FC<ProposedSolutionsListProps> = ({ proposedS
           }}
         >
           <Grid container rowSpacing={1}>
-            <Grid item xs={12} sx={{ p: 2, mt: 1, minHeight: 100, borderRadius: 1, bgcolor: '#474848' }}>
+            <Grid item xs={12} sx={{ p: 2, mt: 1, minHeight: 100, borderRadius: 1, bgcolor: isDark ? '#474848' : 'white' }}>
               <DetailDisplay label="Description" content={proposedSolution.description} />
             </Grid>
-            <Grid item xs={12} sx={{ p: 2, mt: 2, minHeight: 100, borderRadius: 1, bgcolor: '#474848' }}>
+            <Grid item xs={12} sx={{ p: 2, mt: 2, minHeight: 100, borderRadius: 1, bgcolor: isDark ? '#474848' : 'white' }}>
               <DetailDisplay label="Scope Impact" content={proposedSolution.scopeImpact} />
             </Grid>
             <Grid item xs={7} display="flex" sx={{ marginTop: 0.5 }}>

src/frontend/src/pages/ChangeRequestDetailPage/ReviewNotes.tsx

@@ -17,7 +17,7 @@ interface ReviewNotesProps {
 const ReviewNotes: React.FC<ReviewNotesProps> = ({ reviewer, reviewNotes, dateReviewed }: ReviewNotesProps) => {
   return (
     <InfoBlock title={'Review Notes'}>
-      <Typography>
+      <Typography sx={{ py: '8px' }}>
         <Tooltip
           id="tooltip"
           arrow

src/frontend/src/pages/ChangeRequestDetailPage/StandardDetails.tsx

@@ -20,20 +20,24 @@ const style = {
 };
 const StandardDetails: React.FC<StandardDetailsProps> = ({ cr }: StandardDetailsProps) => {
   return (
-    <Grid container spacing={1}>
-      <InfoBlock title={'What'}>
-        <Typography>{cr.what}</Typography>
-      </InfoBlock>
-      <InfoBlock title="Why">
-        {cr.why.map((ele: ChangeRequestExplanation, idx: number) => (
-          <Box key={'CRExplanation' + idx} display="flex">
-            <Typography sx={style}>{ele.type + ' '}</Typography>
-            <Typography mx={'10px'}>{' - '}</Typography>
-            <Typography>{ele.explain}</Typography>
-          </Box>
-        ))}
-      </InfoBlock>
-    </Grid>
+    <Box>
+      <Box my={1}>
+        <InfoBlock title={'What'}>
+          <Typography>{cr.what}</Typography>
+        </InfoBlock>
+      </Box>
+      <Box my={3}>
+        <InfoBlock title="Why">
+          {cr.why.map((ele: ChangeRequestExplanation, idx: number) => (
+            <Box key={'CRExplanation' + idx} display="flex">
+              <Typography sx={style}>{ele.type + ' '}</Typography>
+              <Typography mx={'10px'}>{' - '}</Typography>
+              <Typography>{ele.explain}</Typography>
+            </Box>
+          ))}
+        </InfoBlock>
+      </Box>
+    </Box>
   );
 };
 

src/frontend/src/pages/CreateChangeRequestPage/CreateChangeRequestView.tsx

@@ -209,7 +209,7 @@ const CreateChangeRequestsView: React.FC<CreateChangeRequestViewProps> = ({
         }
       >
         <Grid container spacing={2} display="flex" justifyContent="space-between">
-          <Grid container item spacing={2} xs={12} md={6}>
+          <Grid container item spacing={2} xs={12} md={6} height="fit-content">
             <Grid item xs={12}>
               <FormLabel>WBS</FormLabel>
               <NERAutocomplete