added cve description to the details page

Author: Nils Kreiner

frontend/src/components/InfoBox.tsx

@@ -31,7 +31,7 @@ const boxProps = (headerComponent: React.ReactNode) => {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        justifyContent: "center",
+        justifyContent: "start",
         backgroundColor: mainTheme.palette.primary.main,
         borderRadius: "0.5rem",
         paddingTop: headerComponent === undefined ? "2rem" : 0,

frontend/src/page/ReportPage.tsx

@@ -482,7 +482,7 @@ const ReportPage: React.FunctionComponent = () => {
                             </>
                         }/>
                     </Grid>
-                    <Grid item md={9}>
+                    <Grid item md={4.5}>
                         <InfoBox component={
                             <>
                                 <Typography color={mainTheme.palette.primary.contrastText}
@@ -504,7 +504,7 @@ const ReportPage: React.FunctionComponent = () => {
                                     "flexWrap": "wrap",
                                     "justifyContent": "space-evenly"
                                 }}>
-                                    <Grid item md={8}>
+                                    <Grid item md={7}>
                                         <Tooltip
 
                                             title={
@@ -526,14 +526,14 @@ const ReportPage: React.FunctionComponent = () => {
                                                 }}/>
                                         </Tooltip>
                                     </Grid>
-                                    <Grid item md={3} sx={{
+                                    <Grid item md={4.5} sx={{
                                         "display": "flex",
                                         "alignItems": "space-between",
                                         "height": "100%",
                                         "flexWrap": "wrap"
                                     }}>
                                         <Typography color={mainTheme.palette.primary.contrastText}
-                                                    variant="h5"
+                                                    variant="h6"
                                                     width={"100%"}>{localization.ReportDetailPage.cvssVectorString}</Typography>
                                         <TextField
                                             style={textfieldStyle}
@@ -551,6 +551,17 @@ const ReportPage: React.FunctionComponent = () => {
                             </>
                         }/>
                     </Grid>
+                    <Grid item md={4.5}>
+                        <InfoBox
+                            component={
+                            <>
+                                <Typography color={mainTheme.palette.primary.contrastText}
+                                            variant="h4" align={"center"}>{localization.ReportDetailPage.infosFound.detailedDescriptionTitle}</Typography>
+                                <Typography style={{paddingLeft: "1rem", paddingRight: "1rem"}} color={"white"}
+                                            variant="body1" align={"left"}>{data?.data.report.cveObject.description}</Typography>
+                            </>
+                        }/>
+                    </Grid>
                     <Grid item md={3}>
                         <Box sx={{"height": "100%"}}>
                             <InfoBox component={

frontend/src/utilities/localization.tsx

@@ -115,7 +115,7 @@ const language = {
             commentPlaceholder: "Kommentieren...",
             infosFound:{
                 infosFoundTitle: "Folgende Informationen gefunden...",
-                detailedDescription: "Detaillierte Beschreibung:",
+                detailedDescriptionTitle: "Detaillierte Beschreibung",
                 suggestedSolutions: "Vorgeschlagene Lösungen",
                 mendIo: "Mend.io:",
                 aquaSec: "AquaSec:",
@@ -428,7 +428,7 @@ const language = {
             commentPlaceholder: "Comment...",
             infosFound:{
                 infosFoundTitle: "Found information...",
-                detailedDescription: "Detailed description:",
+                detailedDescriptionTitle: "Detailed description",
                 suggestedSolutions: "Suggested solutions",
                 mendIo: "Mend.io:",
                 aquaSec: "AquaSec:",