From 95ae7c3c5ff4b5000cd3a1a2dce22f7a3fcce433 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 12 Dec 2024 09:11:26 -0500
Subject: [PATCH] Fleet UI: Fix policy truncation and add tooltip (#24659)

---
 changes/24334-policy-truncation                        |  1 +
 frontend/components/buttons/Button/_styles.scss        |  1 -
 .../HostPoliciesTable/HostPoliciesTableConfig.tsx      |  3 ++-
 .../pages/hosts/details/cards/Policies/_styles.scss    | 10 ++++------
 4 files changed, 7 insertions(+), 8 deletions(-)
 create mode 100644 changes/24334-policy-truncation

diff --git a/changes/24334-policy-truncation b/changes/24334-policy-truncation
new file mode 100644
index 0000000000..a8137dcb3d
--- /dev/null
+++ b/changes/24334-policy-truncation
@@ -0,0 +1 @@
+- Fix policy truncation UI bug
diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index 10e02cbce2..db6a279e43 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -70,7 +70,6 @@ $base-class: "button";
   border: 0;
   position: relative;
   cursor: pointer;
-  min-width: max-content;
 
   &:focus {
     outline: none;
diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
index 96455ddad7..b11cf4db1e 100644
--- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
+++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
@@ -8,6 +8,7 @@ import Button from "components/buttons/Button";
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 import { IndicatorStatus } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 
 interface IHeaderProps {
   column: {
@@ -82,7 +83,7 @@ const generatePolicyTableHeaders = (
             onClick={onClickPolicyName}
             variant="text-icon"
           >
-            <span className={`policy-info-text`}>{name}</span>
+            <TooltipTruncatedText value={name} />
           </Button>
         );
       },
diff --git a/frontend/pages/hosts/details/cards/Policies/_styles.scss b/frontend/pages/hosts/details/cards/Policies/_styles.scss
index 2ee63c7732..55810f0782 100644
--- a/frontend/pages/hosts/details/cards/Policies/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Policies/_styles.scss
@@ -23,6 +23,10 @@
         tr {
           .name__cell {
             max-width: 0; // sets ellipsis
+
+            .truncated-tooltip {
+              font-weight: $regular;
+            }
           }
 
           .policy-link {
@@ -39,12 +43,6 @@
             width: 100%; // sets ellipsis
             justify-content: left;
 
-            .policy-info-text {
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-            }
-
             &::after {
               content: url("../assets/images/icon-arrow-right-vibrant-blue-10x18@2x.png");
               transform: scale(0.5);