Merge branch '227281-create-consistent-widths-for-vulnerability-list-columns' into 'master'

Make vulnerability list columns have consistent widths

See merge request gitlab-org/gitlab!40561

app/assets/stylesheets/framework/tables.scss

@@ -180,3 +180,33 @@ table {
     border-top: 0;
   }
 }
+
+.vulnerability-list {
+  @media (min-width: $breakpoint-sm) {
+    .checkbox {
+      padding-left: $gl-spacing-scale-4;
+      padding-right: 0;
+
+      + td,
+      + th {
+        padding-left: $gl-spacing-scale-4;
+      }
+    }
+
+    .status {
+      width: 8%;
+    }
+
+    .severity {
+      width: 9%;
+    }
+
+    .identifier {
+      width: 12%;
+    }
+
+    .scanner {
+      width: 15%;
+    }
+  }
+}

ee/app/assets/javascripts/security_dashboard/components/vulnerability_list.vue

@@ -122,30 +122,32 @@ export default {
       return this.shouldShowSelectionSummary ? 'below-selection-summary' : '';
     },
     fields() {
-      const commonThClass = ['table-th-transparent', 'original-gl-th', 'gl-bg-white!'].join(' ');
       const baseFields = [
         {
           key: 'state',
           label: s__('Vulnerability|Status'),
-          thClass: `vulnerability-td ${commonThClass}`,
+          thClass: 'status',
+          tdClass: 'status',
         },
         {
           key: 'severity',
           label: s__('Vulnerability|Severity'),
-          thClass: `vulnerability-td ${commonThClass}`,
+          thClass: 'severity',
+          tdClass: 'severity',
         },
         {
           key: 'title',
           label: __('Description'),
-          thClass: commonThClass,
-          tdClass: 'gl-word-break-all',
+          thClass: 'description',
+          tdClass: 'description gl-word-break-all',
         },
       ];
 
       if (this.shouldShowSelection) {
         baseFields.unshift({
           key: 'checkbox',
-          thClass: `gl-w-9 ${commonThClass}`,
+          thClass: 'checkbox',
+          tdClass: 'checkbox',
         });
       }
 
@@ -153,8 +155,8 @@ export default {
         baseFields.push({
           key: 'identifier',
           label: s__('Vulnerability|Identifier'),
-          thClass: commonThClass,
-          tdClass: 'gl-word-break-all',
+          thClass: 'identifier',
+          tdClass: 'identifier gl-word-break-all',
         });
       }
 
@@ -162,9 +164,16 @@ export default {
         baseFields.push({
           key: 'reportType',
           label: s__('Reports|Scanner'),
-          thClass: commonThClass,
+          thClass: 'scanner',
+          tdClass: 'scanner',
         });
       }
+
+      // Apply gl-bg-white! to every header.
+      baseFields.forEach(field => {
+        field.thClass = [field.thClass, 'gl-bg-white!']; // eslint-disable-line no-param-reassign
+      });
+
       return baseFields;
     },
   },
@@ -273,12 +282,13 @@ export default {
       :items="vulnerabilities"
       :thead-class="theadClass"
       stacked="sm"
+      class="vulnerability-list"
       show-empty
       responsive
     >
       <template #head(checkbox)>
         <gl-form-checkbox
-          class="mr-0 mb-0"
+          class="gl-m-0"
           data-testid="vulnerability-checkbox-all"
           :checked="hasSelectedAllVulnerabilities"
           @change="toggleAllVulnerabilities"
@@ -286,7 +296,7 @@ export default {
       </template>
 
       <template v-if="shouldShowScannersAlert" #top-row>
-        <td :colspan="fields.length">
+        <td :colspan="fields.length" class="gl-px-0!">
           <security-scanner-alert
             :not-enabled-scanners="notEnabledSecurityScanners"
             :no-pipeline-run-scanners="noPipelineRunSecurityScanners"
@@ -297,7 +307,7 @@ export default {
 
       <template #cell(checkbox)="{ item }">
         <gl-form-checkbox
-          class="d-inline-block mr-0 mb-0"
+          class="gl-display-inline-block! gl-m-0"
           data-testid="vulnerability-checkbox"
           :checked="isSelected(item)"
           @change="toggleVulnerability(item)"
@@ -309,7 +319,7 @@ export default {
       </template>
 
       <template #cell(severity)="{ item }">
-        <severity-badge class="js-severity" :severity="item.severity" />
+        <severity-badge class="js-severity gl-white-space-normal!" :severity="item.severity" />
       </template>
 
       <template #cell(title)="{ item }">
@@ -388,8 +398,3 @@ export default {
     </gl-table>
   </div>
 </template>
-<style>
-.vulnerability-td {
-  width: 8rem;
-}
-</style>

ee/changelogs/unreleased/227281-create-consistent-widths-for-vulnerability-list-columns.yml

+---
+title: Make vulnerability list columns have consistent widths
+merge_request: 40561
+author:
+type: fixed