Fix spacing between columns

- Fix design in desktop version
- Fix design in mobile version

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

@@ -64,14 +64,16 @@ export default {
   <div class="ci-table js-security-dashboard-table" data-qa-selector="security_report_content">
     <selection-summary v-if="isSelectingVulnerabilities" />
     <div class="gl-responsive-table-row table-row-header gl-bg-gray-50 text-2 px-2" role="row">
-      <div class="table-section">
+      <div class="table-section section-5">
         <gl-form-checkbox
           :checked="hasSelectedAllVulnerabilities"
           class="my-0 ml-1 mr-3"
           @change="handleSelectAll"
         />
       </div>
-      <div class="table-section section-10" role="rowheader">{{ s__('Reports|Severity') }}</div>
+      <div class="table-section section-15" role="rowheader">
+        {{ s__('Reports|Severity') }}
+      </div>
       <div class="table-section flex-grow-1" role="rowheader">
         {{ s__('Reports|Vulnerability') }}
       </div>

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

@@ -80,7 +80,7 @@ export default {
     class="gl-responsive-table-row vulnerabilities-row p-2"
     :class="{ dismissed: isDismissed, 'gl-bg-blue-50': isSelected }"
   >
-    <div class="table-section">
+    <div class="table-section section-5">
       <gl-form-checkbox
         :checked="isSelected"
         :inline="true"
@@ -89,10 +89,10 @@ export default {
       />
     </div>
 
-    <div class="table-section section-10">
+    <div class="table-section section-15">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Severity') }}</div>
       <div class="table-mobile-content">
-        <severity-badge :severity="severity" />
+        <severity-badge :severity="severity" class="text-right text-md-left" />
       </div>
     </div>