UI: Fix SVG cutoff at certain zooms (#10607)

## Addresses #10328

- Added 1px of padding to fix clipping at certain zoom levels.
 

https://user-images.githubusercontent.com/61553566/226456062-43081392-3698-4eff-8104-953e096b33c3.mov

- Restore alignment, and keep "critical policy" icon from being
truncated within cells
<img width="1170" alt="Screenshot 2023-03-21 at 5 42 29 PM"
src="https://user-images.githubusercontent.com/61553566/226772991-03910e98-bc77-4436-9d23-3372068cb0f8.png">

## Checklist for submitter

If some of the following don't apply, delete the relevant line.

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

---------

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

changes/10328-clipped-icons

@@ -0,0 +1 @@
+- Fix an issue where some icons would appear clipped at certain zoom levels

frontend/components/Icon/_styles.scss

@@ -2,4 +2,8 @@
   // keeps this element the same size as the svg
   // aligns properly in text, buttons, dropdowns, summary tile custom component
   display: inline-flex;
+
+  svg {
+    padding: 1px;
+  }
 }

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -152,8 +152,24 @@
   }
 
   .policy-icon {
-    margin-left: $pad-xsmall;
+    margin-left: 1px;
     position: relative;
-    bottom: -1px;
+  }
+
+  .policy-name-cell {
+    .children-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .tooltip-base {
+        display: inline-flex;
+      }
+
+      .policy-name-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
   }
 }

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx

@@ -106,13 +106,14 @@ const generateTableHeaders = (options: {
       accessor: "name",
       Cell: (cellProps: ICellProps): JSX.Element => (
         <LinkCell
-          classes="w250"
+          classes="w250 policy-name-cell"
           value={
             <>
-              {cellProps.cell.value}
+              <div className="policy-name-text">{cellProps.cell.value}</div>
               {cellProps.row.original.critical && (
                 <>
                   <span
+                    className="tooltip-base"
                     data-tip
                     data-for={`critical-tooltip-${cellProps.row.original.id}`}
                   >