From 582446785646440a0cc5eacc0b2ee36f9122f288 Mon Sep 17 00:00:00 2001
From: Nils Kreiner <kreiner@mac.speedport.ip>
Date: Wed, 19 Feb 2025 14:48:13 +0100
Subject: [PATCH] added cve description to the details page

---
 frontend/src/components/InfoBox.tsx     |  2 +-
 frontend/src/page/ReportPage.tsx        | 19 +++++++++++++++----
 frontend/src/utilities/localization.tsx |  4 ++--
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/InfoBox.tsx b/frontend/src/components/InfoBox.tsx
index 25ee81b..7ed5f1f 100644
--- a/frontend/src/components/InfoBox.tsx
+++ b/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,
diff --git a/frontend/src/page/ReportPage.tsx b/frontend/src/page/ReportPage.tsx
index fda9042..efe684f 100644
--- a/frontend/src/page/ReportPage.tsx
+++ b/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={
diff --git a/frontend/src/utilities/localization.tsx b/frontend/src/utilities/localization.tsx
index cec5165..e715e3a 100644
--- a/frontend/src/utilities/localization.tsx
+++ b/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:",