Fixes styling on the dashboard counts

- Replaces a depricated class
- Fixes margins on smaller screen sizes

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

@@ -28,10 +28,7 @@ export default {
     <div class="p-2 bg-gray-light d-flex justify-content-center">
       <severity-badge :severity="severity" />
     </div>
-    <div
-      ref="body"
-      class="pt-3 pb-3 gl-font-size-20-deprecated-no-really-do-not-use-me text-center"
-    >
+    <div ref="body" class="pt-3 pb-3 gl-font-size-h2 text-center">
       <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
     </div>
   </div>

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

@@ -48,7 +48,7 @@ export default {
 </script>
 
 <template>
-  <div class="vulnerabilities-count-list mb-5 mt-4">
+  <div class="vulnerabilities-count-list mt-4">
     <gl-alert v-if="showAlert" class="mb-4" variant="danger" @dismiss="onErrorDismiss">
       {{
         s__(
@@ -57,7 +57,7 @@ export default {
       }}
     </gl-alert>
     <div class="row">
-      <div v-for="count in counts" :key="count.severity" class="col-md col-sm-6">
+      <div v-for="count in counts" :key="count.severity" class="mb-5 col-md col-sm-6">
         <vulnerability-count
           :severity="count.severity"
           :count="count.count"

ee/changelogs/unreleased/fix-vuln-counts-styling.yml

+---
+title: Fixes styling on vulnerability counts
+merge_request: 31076
+author:
+type: fixed