From e60917f4c73caa996d36185b9c102cdf50c96e90 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 23 Mar 2023 09:31:33 -0700
Subject: [PATCH] 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                   |  1 +
 frontend/components/Icon/_styles.scss         |  4 ++++
 .../policies/ManagePoliciesPage/_styles.scss  | 20 +++++++++++++++++--
 .../PoliciesTable/PoliciesTableConfig.tsx     |  5 +++--
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 changes/10328-clipped-icons

diff --git a/changes/10328-clipped-icons b/changes/10328-clipped-icons
new file mode 100644
index 0000000000..00081c4302
--- /dev/null
+++ b/changes/10328-clipped-icons
@@ -0,0 +1 @@
+- Fix an issue where some icons would appear clipped at certain zoom levels
diff --git a/frontend/components/Icon/_styles.scss b/frontend/components/Icon/_styles.scss
index 13c4c4a4cf..03f557f68d 100644
--- a/frontend/components/Icon/_styles.scss
+++ b/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;
+  }
 }
diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
index d57730a39b..fdb32f1271 100644
--- a/frontend/pages/policies/ManagePoliciesPage/_styles.scss
+++ b/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;
+      }
+    }
   }
 }
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx
index b855bc1613..d4454c0e18 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx
+++ b/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}`}
                   >