UI - Use flex properties for issues cell (#14967)

Instead of less flexible `margin`

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/TableContainer/DataTable/IssueCell/IssueCell.tsx

@@ -40,7 +40,7 @@ const IssueCell = ({ issues, rowId }: IIssueCellProps<any>): JSX.Element => {
           Failing policies ({issues.failing_policies_count})
         </span>
       </ReactTooltip>
-      <span className={`total-issues-count`}>{issues.total_issues_count}</span>
+      {issues.total_issues_count}
     </>
   );
 };

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -223,6 +223,7 @@
                 &__cell {
                   display: flex;
                   align-items: center;
+                  gap: $pad-small;
                   .issue-cell__icon {
                     display: flex;
                     align-items: center;
@@ -291,10 +292,6 @@
     padding-bottom: $pad-large;
   }
 
-  .total-issues-count {
-    margin-left: $pad-small;
-  }
-
   &__export-btn {
     margin-left: $pad-medium;