fix(ui): add minimum width to advisory column

Signed-off-by: Keshav Priyadarshi <git@keshav.space>

Author: keshav-space

vulnerabilities/templates/severity_curation.html

@@ -4,12 +4,6 @@
 
 {% block extrahead %}
 <style>
-    .state-undefined {
-        background-color: #f5f5f5 !important;
-        color: #7a7a7a !important;
-        font-style: italic;
-    }
-
     .table {
         table-layout: fixed !important;
         width: 100% !important;
@@ -36,15 +30,21 @@
     }
 
     #table-header th:first-child {
-        width: 260px !important;
+        width: 300px !important;
     }
+
     #table-header th:nth-child(2) {
-        width: 240px !important;
+        width: 230px !important;
+    }
+
+    #table-header th:nth-child(n+3) {
+        width: 160px !important;
     }
 
     .metric-category-row {
         background-color: #eef6fc !important;
         color: #1d72b8;
+        font-weight: 600;
     }
 
     .curation-select-container {
@@ -65,10 +65,7 @@
     }
 
     .vector-data-cell {
-        background-color: #fafafa;
-        padding: 8px !important;
         vertical-align: middle !important;
-        border: 1px solid #dbdbdb !important;
         word-break: break-all !important;
     }
 
@@ -79,7 +76,13 @@
 
     .immutable-advisory-cell {
         vertical-align: middle !important;
-        background-color: #ffffff;
+        cursor: not-allowed;
+    }
+
+    .state-undefined {
+        background-color: #f5f5f5 !important;
+        color: #7a7a7a !important;
+        font-style: italic;
     }
 
     #summaries-container p strong {

vulnerablecode/static/js/severity_curation.js

@@ -243,7 +243,7 @@ const app = {
         const vectorDataRow = document.createElement('tr');
         let rowHtml = `
             <td></td>
-            <td class="vector-data-cell is-size-6 has-text-centered ">
+            <td class="vector-data-cell is-size-6 has-text-centered py-4">
                 ${this.generateCalculatedVectorString(item)}
             </td>
         `;
@@ -252,11 +252,11 @@ const app = {
             const colKey = `${this.currentIndex}-col-${groupIdx}`;
             const isExpanded = this.expandedFolds.has(colKey);
 
-            rowHtml += `<td class="vector-data-cell is-size-6 has-text-centered ">${advGroup.primary.vector_string || 'NA'}</td>`;
+            rowHtml += `<td class="vector-data-cell is-size-6 has-text-centered py-4 ">${advGroup.primary.vector_string || 'NA'}</td>`;
 
             if (isExpanded && advGroup.secondaries) {
                 advGroup.secondaries.forEach(sec => {
-                    rowHtml += `<td class="vector-data-cell is-size-6 has-text-centered" style="background-color: #fafafa;">${sec.vector_string || 'NA'}</td>`;
+                    rowHtml += `<td class="vector-data-cell is-size-6 has-text-centered py-4" style="background-color: #fafafa;">${sec.vector_string || 'NA'}</td>`;
                 });
             }
         });
@@ -380,27 +380,27 @@ const app = {
         this.renderBody(item); 
     },
 
-pickAdvisory(groupIdx, type, secIdx = null) {
-    const item = curationItems[this.currentIndex];
-    let targetAdvisory;
+    pickAdvisory(groupIdx, type, secIdx = null) {
+        const item = curationItems[this.currentIndex];
+        let targetAdvisory;
 
-    if (type === 'primary') {
-        targetAdvisory = item.advisories[groupIdx].primary.vector;
-    } else if (type === 'secondary') {
-        targetAdvisory = item.advisories[groupIdx].secondaries[secIdx].vector;
-    }
+        if (type === 'primary') {
+            targetAdvisory = item.advisories[groupIdx].primary.vector;
+        } else if (type === 'secondary') {
+            targetAdvisory = item.advisories[groupIdx].secondaries[secIdx].vector;
+        }
 
-    for (const [cat, metrics] of Object.entries(cvss_mapping[item.cvss])) {
-        for (const metricKey of Object.keys(metrics)) {
-            if (targetAdvisory[metricKey] !== undefined && targetAdvisory[metricKey] !== '') {
-                this.userStates[this.currentIndex][metricKey] = String(targetAdvisory[metricKey]);
-            } else {
-                this.userStates[this.currentIndex][metricKey] = ''; 
+        for (const [cat, metrics] of Object.entries(cvss_mapping[item.cvss])) {
+            for (const metricKey of Object.keys(metrics)) {
+                if (targetAdvisory[metricKey] !== undefined && targetAdvisory[metricKey] !== '') {
+                    this.userStates[this.currentIndex][metricKey] = String(targetAdvisory[metricKey]);
+                } else {
+                    this.userStates[this.currentIndex][metricKey] = '';
+                }
             }
         }
-    }
-    this.renderBody(item);
-},
+        this.renderBody(item);
+    },
 
     resetCurrentCuration() {
         const item = curationItems[this.currentIndex];