🐛 fix(ui): top-align vulnerability rows in detail panels (#217)

Author: s-b-e-n-s-o-n

ui/src/components/containers/ContainerFullPageTabContent.vue

@@ -466,12 +466,12 @@ function isActionInProgress(container: { id?: unknown; name?: unknown }) {
                 </div>
                 <div v-if="vulnerabilityPreview.length > 0" class="space-y-1.5">
                   <div v-for="vulnerability in vulnerabilityPreview" :key="vulnerability.id"
-                       class="flex items-center gap-2 px-3 py-2 dd-rounded text-2xs-plus"
+                       class="flex items-start gap-2 px-3 py-2 dd-rounded text-2xs-plus"
                        :style="{ backgroundColor: 'var(--dd-bg-inset)' }">
-                    <AppBadge size="xs" :custom="severityStyle(normalizeSeverity(vulnerability.severity))">
+                    <AppBadge size="xs" class="mt-0.5 shrink-0" :custom="severityStyle(normalizeSeverity(vulnerability.severity))">
                       {{ normalizeSeverity(vulnerability.severity) }}
                     </AppBadge>
-                    <span class="font-mono dd-text truncate">{{ vulnerability.id }}</span>
+                    <span class="min-w-0 font-mono dd-text truncate">{{ vulnerability.id }}</span>
                     <span class="dd-text-muted truncate ml-auto">{{ getVulnerabilityPackage(vulnerability) }}</span>
                   </div>
                 </div>

ui/src/components/containers/ContainerSideTabContent.vue

@@ -449,12 +449,12 @@ function isActionInProgress(container: { id?: unknown; name?: unknown }) {
 
                 <div v-if="vulnerabilityPreview.length > 0" class="space-y-1">
                   <div v-for="vulnerability in vulnerabilityPreview" :key="vulnerability.id"
-                       class="flex items-center gap-2 px-2.5 py-1.5 dd-rounded text-2xs"
+                       class="flex items-start gap-2 px-2.5 py-1.5 dd-rounded text-2xs"
                        :style="{ backgroundColor: 'var(--dd-bg-inset)' }">
-                    <AppBadge size="xs" :custom="severityStyle(normalizeSeverity(vulnerability.severity))">
+                    <AppBadge size="xs" class="mt-0.5 shrink-0" :custom="severityStyle(normalizeSeverity(vulnerability.severity))">
                       {{ normalizeSeverity(vulnerability.severity) }}
                     </AppBadge>
-                    <span class="font-mono dd-text truncate">{{ vulnerability.id }}</span>
+                    <span class="min-w-0 font-mono dd-text truncate">{{ vulnerability.id }}</span>
                     <span class="dd-text-muted truncate ml-auto">{{ getVulnerabilityPackage(vulnerability) }}</span>
                   </div>
                 </div>

ui/src/views/SecurityView.vue

@@ -636,22 +636,23 @@ onUnmounted(() => {
           <div class="divide-y" :style="{ borderColor: 'var(--dd-border)' }">
             <div v-for="vuln in selectedImageVulnsWithSafeUrl" :key="vuln.id + vuln.package"
                  class="px-4 py-3 hover:dd-bg-hover transition-colors">
-              <div class="flex items-center gap-2 mb-1.5">
+              <div class="flex items-start gap-2 mb-1.5">
                 <AppIcon :name="severityIcon(vuln.severity)" :size="12"
+                         class="mt-0.5 shrink-0"
                          :style="{ color: severityColor(vuln.severity).text }" />
-                <AppBadge :custom="{ bg: severityColor(vuln.severity).bg, text: severityColor(vuln.severity).text }" size="xs" class="px-1.5 py-0">
+                <AppBadge :custom="{ bg: severityColor(vuln.severity).bg, text: severityColor(vuln.severity).text }" size="xs" class="mt-0.5 shrink-0 px-1.5 py-0">
                   {{ vuln.severity }}
                 </AppBadge>
-                <span class="font-mono text-2xs-plus font-semibold dd-text truncate">{{ vuln.id }}</span>
+                <span class="min-w-0 font-mono text-2xs-plus font-semibold dd-text truncate">{{ vuln.id }}</span>
               </div>
-              <div class="flex items-center gap-2 text-2xs-plus ml-5">
+              <div class="flex items-start gap-2 text-2xs-plus ml-5 min-w-0">
                 <span class="font-medium dd-text">{{ vuln.package }}</span>
                 <span class="dd-text-muted">{{ vuln.version }}</span>
-                <AppBadge v-if="vuln.fixedIn" tone="success" size="xs" class="ml-auto px-1.5 py-0">
-                  <AppIcon name="check" :size="9" class="mr-0.5" />
+                <AppBadge v-if="vuln.fixedIn" tone="success" size="xs" class="ml-auto mt-0.5 shrink-0 px-1.5 py-0">
+                  <AppIcon name="check" :size="9" class="mr-0.5 shrink-0" />
                   {{ vuln.fixedIn }}
                 </AppBadge>
-                <span v-else class="ml-auto text-2xs dd-text-muted">No fix</span>
+                <span v-else class="ml-auto mt-0.5 shrink-0 text-2xs dd-text-muted">No fix</span>
               </div>
               <div
                 v-if="vuln.title || vuln.target || vuln.safePrimaryUrl"

ui/tests/components/ContainerSideTabContent.spec.ts

@@ -717,6 +717,12 @@ describe('ContainerSideTabContent - Environment Variables', () => {
     await sbomButton?.trigger('click');
 
     expect(wrapper.text()).toContain('CVE-2026-0001');
+    const vulnerabilityLabel = wrapper
+      .findAll('.font-mono')
+      .find((node) => node.text().includes('CVE-2026-0001'));
+    const vulnerabilityRow = vulnerabilityLabel?.element.parentElement;
+    expect(vulnerabilityRow?.classList.contains('items-start')).toBe(true);
+    expect(vulnerabilityRow?.classList.contains('items-center')).toBe(false);
     expect(selectedSbomFormat.value).toBe('cyclonedx-json');
     expect(loadDetailSecurityData).toHaveBeenCalledTimes(1);
     expect(loadDetailSbom).toHaveBeenCalledTimes(1);

ui/tests/components/containers/ContainerFullPageTabContent.spec.ts

@@ -803,6 +803,12 @@ describe('ContainerFullPageTabContent', () => {
     expect(wrapper.text()).toContain('Abort on pre-update failure');
     expect(wrapper.text()).toContain('{{name}}');
     expect(wrapper.text()).toContain('CVE-2026-0001');
+    const vulnerabilityLabel = wrapper
+      .findAll('.font-mono')
+      .find((node) => node.text().includes('CVE-2026-0001'));
+    const vulnerabilityRow = vulnerabilityLabel?.element.parentElement;
+    expect(vulnerabilityRow?.classList.contains('items-start')).toBe(true);
+    expect(vulnerabilityRow?.classList.contains('items-center')).toBe(false);
     expect(wrapper.text()).toContain('components:');
     expect(wrapper.text()).toContain('generated:');
 

ui/tests/views/SecurityView.spec.ts

@@ -477,6 +477,13 @@ describe('SecurityView', () => {
       expect(w.text()).toContain('OpenSSL buffer overflow');
       expect(w.text()).toContain('usr/lib/libcrypto.so');
       expect(w.find('a[href="https://avd.aquasec.com/nvd/cve-2026-9999"]').exists()).toBe(true);
+
+      const vulnerabilityRow = w.find('.divide-y > div');
+      const detailLines = vulnerabilityRow.findAll('.flex');
+      expect(detailLines[0].classes()).toContain('items-start');
+      expect(detailLines[0].classes()).not.toContain('items-center');
+      expect(detailLines[1].classes()).toContain('items-start');
+      expect(detailLines[1].classes()).not.toContain('items-center');
     });
 
     it('computes safe vulnerability URLs once per vulnerability instead of per binding', async () => {