Fleet UI: Fix policy truncation and add tooltip (#24659)

fleetdm · Dec 12, 2024 · 95ae7c3 · 95ae7c3
1 parent 4dd152c
commit 95ae7c3
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git a/changes/24334-policy-truncation 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
@@ -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
@@ -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
@@ -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);