From 697a45757b778a3b9ee1c33c2c0e1c372a4061df Mon Sep 17 00:00:00 2001
From: Sudhir Verma <sudhirvvermaa@gmail.com>
Date: Thu, 18 Apr 2024 11:34:47 +0530
Subject: [PATCH] Fix Ui for project card and model Defense Model Capability

---
 .../AssessmentReport/index.tsx                |  4 +-
 .../FuzzingModel/sections/DefenseSummary.tsx  | 82 +++++++++----------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/src/pages/BesVersionHistory/AssessmentReport/index.tsx b/src/pages/BesVersionHistory/AssessmentReport/index.tsx
index 155092d9..618f3b44 100644
--- a/src/pages/BesVersionHistory/AssessmentReport/index.tsx
+++ b/src/pages/BesVersionHistory/AssessmentReport/index.tsx
@@ -696,7 +696,7 @@ function printText(item: string) {
   } else if (item === "License Compliance") {
     return "unique licenses found";
   } else if (item === "ScoreCard" || item === "Criticality Score") {
-    return "on OpenSSF " + item;
+    return "OpenSSF " + item;
   } else {
     return "on " + item;
   }
@@ -1086,7 +1086,7 @@ function AssessmentReport({ name, version, itemData, masterData }: any) {
   return (
     <>
       { reports.map((item, index) => (
-        <Grid item xs={ 6 } md={ 2 } lg={ 2 } xl={ 2 }>
+        <Grid item xs={ 6 } md={ 4 } lg={ 4 } xl={ 2 }>
           <ReportModal
             key={ item }
             version={ version }
diff --git a/src/pages/FuzzingModel/sections/DefenseSummary.tsx b/src/pages/FuzzingModel/sections/DefenseSummary.tsx
index e5892a12..c581aee8 100644
--- a/src/pages/FuzzingModel/sections/DefenseSummary.tsx
+++ b/src/pages/FuzzingModel/sections/DefenseSummary.tsx
@@ -99,49 +99,47 @@ function DefenseSummary() {
             >
               Defense Model Capability
             </MKTypography>
-            <Box sx={ { width: "100%" } } >
-              <Box sx={ { borderBottom: 1, borderColor: "divider" } }>
-                <Tabs
-                  value={ value }
-                  onChange={ handleChange }
-                  aria-label="basic tabs example"
-                  style={ { backgroundColor: "#90ee90" } }
-                >
-                  <Tab
-                    sx={ { fontSize: "12px" } }
-                    label="Evasion"
-                    { ...a11yProps(0) }
-                  />
-                  <Tab
-                    sx={ { fontSize: "12px" } }
-                    label="Inference"
-                    { ...a11yProps(1) }
-                  />
-                  <Tab
-                    sx={ { fontSize: "12px" } }
-                    label="Extraction"
-                    { ...a11yProps(2) }
-                  />
-                  <Tab
-                    sx={ { fontSize: "12px" } }
-                    label="Data Poisoning"
-                    { ...a11yProps(3) }
-                  />
-                </Tabs>
-              </Box>
-              <CustomTabPanel value={ value } index={ 0 }>
-                <DefenceData report={ evasion } reportName="evasion" />
-              </CustomTabPanel>
-              <CustomTabPanel value={ value } index={ 1 }>
-                <DefenceData report={ inference } reportName="inference" />
-              </CustomTabPanel>
-              <CustomTabPanel value={ value } index={ 2 }>
-                <DefenceData report={ extraction } reportName="extraction" />
-              </CustomTabPanel>
-              <CustomTabPanel value={ value } index={ 3 }>
-                <DefenceData report={ dataPoisoning } reportName="dataPoisoning" />
-              </CustomTabPanel>
+            <Box>
+              <Tabs
+                value={ value }
+                onChange={ handleChange }
+                aria-label="basic tabs example"
+                style={ { backgroundColor: "#90ee90" } }
+              >
+                <Tab
+                  sx={ { fontSize: "12px", minWidth: '15px' } }
+                  label="Evasion"
+                  { ...a11yProps(0) }
+                />
+                <Tab
+                  sx={ { fontSize: "12px", minWidth: '15px' } }
+                  label="Inference"
+                  { ...a11yProps(1) }
+                />
+                <Tab
+                  sx={ { fontSize: "12px", minWidth: '15px' } }
+                  label="Extraction"
+                  { ...a11yProps(2) }
+                />
+                <Tab
+                  sx={ { fontSize: "12px", minWidth: '15px' } }
+                  label="Data Poisoning"
+                  { ...a11yProps(3) }
+                />
+              </Tabs>
             </Box>
+            <CustomTabPanel value={ value } index={ 0 }>
+              <DefenceData report={ evasion } reportName="evasion" />
+            </CustomTabPanel>
+            <CustomTabPanel value={ value } index={ 1 }>
+              <DefenceData report={ inference } reportName="inference" />
+            </CustomTabPanel>
+            <CustomTabPanel value={ value } index={ 2 }>
+              <DefenceData report={ extraction } reportName="extraction" />
+            </CustomTabPanel>
+            <CustomTabPanel value={ value } index={ 3 }>
+              <DefenceData report={ dataPoisoning } reportName="dataPoisoning" />
+            </CustomTabPanel>
           </MKBox>
         </Card>
       </Grid>