Fix: UI styling issues on Registry configuration detail and Vex management detail pages

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/config/table-headers.ts

@@ -71,35 +71,38 @@ export const REGISTRY_SCAN_HISTORY_TABLE = [
     value: "status.statusResult.lastTransitionTime",
     formatter: "Date",
     sort: "status.statusResult.lastTransitionTime:desc",
+    width: 210,
   },
   {
     name: "progress",
     labelKey: "imageScanner.registries.configuration.scanTable.header.progress",
     getValue: (row: any) => row,
     formatter: "Progress",
     sort: "progress",
+    width: 70,
   },
   {
     name: "imagesScanned",
     labelKey:
       "imageScanner.registries.configuration.scanTable.header.imagesScanned",
     value: "status.scannedImagesCount",
     sort: "status.scannedImagesCount",
+    width: 120,
   },
   {
     name: "imagesFound",
     labelKey:
       "imageScanner.registries.configuration.scanTable.header.imagesFound",
     value: "status.imagesCount",
     sort: "status.imagesCount",
+    width: 120,
   },
   {
     name: "errors",
     labelKey: "imageScanner.registries.configuration.scanTable.header.error",
     value: "status.statusResult.message",
     formatter: "ScanErrorCell",
     sort: "errors",
-    width: 150,
   },
 ];
 
@@ -156,7 +159,13 @@ export const IMAGE_LIST_TABLE = [
     labelKey: "imageScanner.images.listTable.headers.identifiedCVEs",
     value: "spec.scanResult",
     formatter: "IdentifiedCVEsCell",
-    sort: ["spec.scanResult.critical", "spec.scanResult.high", "spec.scanResult.medium", "spec.scanResult.low", "spec.scanResult.none"],
+    sort: [
+      "spec.scanResult.critical",
+      "spec.scanResult.high",
+      "spec.scanResult.medium",
+      "spec.scanResult.low",
+      "spec.scanResult.none",
+    ],
     width: 300,
   },
   {
@@ -349,7 +358,7 @@ export const VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE = [
     name: "package",
     labelKey: "imageScanner.vulnerabilities.details.table.headers.package",
     value: "package",
-    sort: "package"
+    sort: "package",
   },
   {
     name: "status",
@@ -366,7 +375,8 @@ export const VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE = [
   },
   {
     name: "packageVersion",
-    labelKey: "imageScanner.vulnerabilities.details.table.headers.packageVersion",
+    labelKey:
+      "imageScanner.vulnerabilities.details.table.headers.packageVersion",
     value: "packageVersion",
     sort: "packageVersion",
   },
@@ -381,7 +391,7 @@ export const VULNERABILITIES_DETAIL_IMAGE_LIST_TABLE = [
     labelKey: "imageScanner.vulnerabilities.details.table.headers.repository",
     value: "repository",
     sort: "repository",
-  }
+  },
 ];
 
 export const VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE = [
@@ -397,8 +407,8 @@ export const VULNERABILITIES_DETAIL_GROUP_BY_REPOSITORY_TABLE = [
     labelKey: "imageScanner.vulnerabilities.details.table.headers.registry",
     value: "registry",
     sort: "registry",
-  }
-]
+  },
+];
 
 export const VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE = [
   {
@@ -435,7 +445,8 @@ export const VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE = [
   },
   {
     name: "packageVersion",
-    labelKey: "imageScanner.vulnerabilities.details.table.headers.packageVersion",
+    labelKey:
+      "imageScanner.vulnerabilities.details.table.headers.packageVersion",
     value: "packageVersion",
     sort: "packageVersion",
   },
@@ -444,6 +455,5 @@ export const VULNERABILITIES_DETAIL_SUB_IMAGES_TABLE = [
     labelKey: "imageScanner.vulnerabilities.details.table.headers.packagePath",
     value: "packagePath",
     sort: "packagePath",
-  }
-
-]
+  },
+];

pkg/sbombastic-image-vulnerability-scanner/formatters/UriExternalLink.vue

@@ -20,3 +20,11 @@ export default {
     <i class="icon icon-external-link"></i>
   </a>
 </template>
+
+<style lang="scss" scoped>
+  .uri-link {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+</style>