fix(vulnerabilities): Use dynamic BlockPercentageBar

Still need to set responsiveness behavior by fixed height

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/components/common/SevereVulnerabilitiesItem.vue

@@ -7,24 +7,24 @@
       <div class="impacted-container">
         <div class="impacted">
           <span>{{ vulnerability.impactedImages }}</span>
-          <BlockPercentageBarAlt 
+          <BlockPercentageBar
+            class="percentage-bar"
             :percentage="(vulnerability.impactedImages / total) * 100"
-            :ticks="23"
           />
         </div>
       </div>
     </div>
 </template>
 
 <script>
-  import BlockPercentageBarAlt from './BlockPercentageBarAlt.vue';
+  import BlockPercentageBar from './BlockPercentageBar.vue';
   import ScoreBadge from './ScoreBadge.vue';
 
   export default {
     name: 'severeVulnerabilitiesItem',
     components: {
       ScoreBadge,
-      BlockPercentageBarAlt
+      BlockPercentageBar
     },
     props: {
       vulnerability: {
@@ -46,24 +46,26 @@
 
 <style lang="scss" scoped>
   .vulnerability-record {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 0.75fr 1.25fr;
     padding: 4px 0;
     align-items: center;
     align-self: stretch;
+    max-height: 28px;
     
     .cve {
       display: flex;
       padding: 0 16px;
       align-items: flex-start;
       gap: 8px;
-      flex: 1 0 0;
     }
 
     .impacted-container {
       display: flex;
-      width: 260px;
       padding: 0 16px;
       align-items: center;
+      justify-content: end;
+      min-width: 230px;
     }
 
     .impacted {
@@ -73,6 +75,10 @@
       gap: 16px;
       flex: 1 0 0;
       align-self: stretch;
+
+      .percentage-bar {
+        width: 158px;
+      }
     }
   }
 </style>