Merge branch 'fix-security-ds-th' into 'master'

Update security dashboard table's header layout

See merge request gitlab-org/gitlab!31642

app/assets/stylesheets/framework/tables.scss

@@ -9,6 +9,10 @@ table {
   * This is a temporary workaround until we fix the neutral
   * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
   *
+  * The overwrites here affected the security dashboard tables, when removing
+  * this code, table-th-transparent and original-text-color classes should
+  * be removed there.
+  *
   * Remove this code as soon as this happens
   */
   &.gl-table {
@@ -54,6 +58,11 @@ table {
           background: none;
           color: $gl-text-color-secondary;
         }
+
+        &.original-gl-th {
+          @include gl-text-gray-700;
+          border-bottom: 1px solid $cycle-analytics-light-gray;
+        }
       }
 
       td {

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

@@ -71,24 +71,27 @@ export default {
       return this.shouldShowSelection ? '' : 'd-none';
     },
     fields() {
+      const commonThClass = ['table-th-transparent', 'original-gl-th'].join(' ');
       return [
         {
           key: 'checkbox',
           class: this.checkboxClass,
+          thClass: commonThClass,
         },
         {
           key: 'state',
           label: s__('Vulnerability|Status'),
-          thClass: 'gl-w-64',
+          thClass: `gl-w-64 ${commonThClass}`,
         },
         {
           key: 'severity',
           label: s__('Vulnerability|Severity'),
-          thClass: 'gl-w-64',
+          thClass: `gl-w-64 ${commonThClass}`,
         },
         {
           key: 'title',
           label: __('Description'),
+          thClass: commonThClass,
         },
       ];
     },