Fix Security Dashboard Header font size

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

@@ -53,7 +53,10 @@ export default {
 
 <template>
   <div class="ci-table">
-    <div class="gl-responsive-table-row table-row-header vulnerabilities-row-header" role="row">
+    <div
+      class="gl-responsive-table-row table-row-header vulnerabilities-row-header px-2"
+      role="row"
+    >
       <div class="table-section section-10" role="rowheader">{{ s__('Reports|Severity') }}</div>
       <div class="table-section section-60" role="rowheader">
         {{ s__('Reports|Vulnerability') }}
@@ -104,8 +107,6 @@ export default {
 <style>
 .vulnerabilities-row-header {
   background-color: #fafafa;
-  font-size: 1rem;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
+  font-size: 14px;
 }
 </style>

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

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-responsive-table-row vulnerabilities-row" :class="{ dismissed: isDismissed }">
+  <div class="gl-responsive-table-row vulnerabilities-row p-2" :class="{ dismissed: isDismissed }">
     <div class="table-section section-10">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Severity') }}</div>
       <div class="table-mobile-content"><severity-badge :severity="severity" /></div>
@@ -110,10 +110,6 @@ export default {
 
 <style scoped>
 @media (min-width: 768px) {
-  .vulnerabilities-row {
-    padding: 0.6em 0.4em;
-  }
-
   .vulnerabilities-row:hover,
   .vulnerabilities-row:focus {
     background: #f6fafd;

ee/changelogs/unreleased/8891-table-headers-font-size-is-too-big-in-group-level-security-dashboard.yml

+---
+title: Fix Security Dashboard Header font size
+merge_request: 9011
+author:
+type: fixed