Fix: UI styling issues on the Vulnerability detail page

Author: lsongsuse

pkg/sbombastic-image-vulnerability-scanner/components/CveDetails.vue

@@ -112,8 +112,10 @@ export default {
     <div class="about">
       <div class="header-section">
         <div class="title">
-          <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITIES}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
-        {{ $route.params.id }}
+          <span class="resource-header-name">
+            <RouterLink :to="`/c/${this.$route.params.cluster}/${this.PRODUCT_NAME}/${this.PAGE.VULNERABILITIES}`">{{ t('imageScanner.vulnerabilities.title') }}:</RouterLink>
+          {{ $route.params.id }}
+          </span>
           <BadgeState
               :color="getSeverityColor(cveDetail.severity)"
               :label="t(`imageScanner.enum.cve.${cveDetail.severity}`)"
@@ -165,9 +167,12 @@ export default {
             <div class="stat-item">
               <span class="label">Sources</span>
               <span class="value">
-                <a v-for="(source, index) in cveDetail.sources" :key="index" :href="source.link" target="_blank" class="source-link">
-                  {{ source.name }}
-                </a>
+                <span v-for="(source, index) in cveDetail.sources" :key="index">
+                  <a :href="source.link" target="_blank" class="source-link">
+                    {{ source.name }} <i class="ml-8 icon icon-external-link" />
+                  </a>
+                  <span v-if="index < cveDetail.sources.length - 1">, </span>
+                </span>
               </span>
             </div>
           </div>
@@ -213,7 +218,7 @@ export default {
           </div>
           <div class="cvss-list">
             <a v-for="(score, index) in cveDetail.cvssScores" :key="index" :href="score.link" target="_blank" class="cvss-link">
-              {{ score.source }} {{ score.score }}
+              {{ score.source }} {{ score.score }} <i class="ml-8 icon icon-external-link" />
             </a>
           </div>
         </div>
@@ -284,7 +289,7 @@ export default {
 .about {
   /* layout */
   display: flex;
-  padding-bottom: 24px;
+  padding-bottom: 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -304,14 +309,14 @@ export default {
 
 .header-section {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 24px;
   align-self: stretch;
 
   .title {
     display: flex;
     align-items: flex-start;
-    gap: 4px;
+    gap: 12px;
     flex: 1 0 0;
     color: #141419;
     font-family: Lato;
@@ -360,6 +365,7 @@ export default {
   font-style: normal;
   font-weight: 400;
   line-height: 21px;
+  margin-bottom: 4px;
 }
 .label {
   display: flex;
@@ -431,8 +437,8 @@ export default {
 }
 
 .ref-url {
-  display: block;
-  color: #0073e6;
+  display: inline-flex;
+  color: #5696ce;
   text-decoration: none;
   word-break: break-all;
 }
@@ -447,12 +453,13 @@ export default {
   flex-direction: column;
 }
 .cvss-link, .source-link {
-  color: #007bff;
+  color: #5696ce;
   text-decoration: none;
   margin-bottom: 5px;
 }
 .cvss-link:hover, .source-link:hover {
   text-decoration: underline;
+
 }
 .popup {
   position: fixed;
@@ -486,4 +493,12 @@ export default {
   width: 100%;
 }
 
+.table-top-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
 </style>

pkg/sbombastic-image-vulnerability-scanner/edit/sbombastic.rancher.io.registry.vue

@@ -203,6 +203,7 @@ export default {
           <LabeledSelect
               v-model:value="value.spec.authSecret"
               data-testid="auth-secret-select"
+              :label="t('imageScanner.registries.configuration.cru.authentication.label')"
               :mode="mode"
               :options="options"
           />