From 46e323cd9c495d3023288fc0ee59bf85b43ad002 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 12 Apr 2022 16:31:07 -0400
Subject: [PATCH] Host Details Page: Policy table truncates policy name 
 (#5087)

---
 .../components/buttons/Button/_styles.scss    |  1 +
 .../HostPoliciesTableConfig.tsx               | 22 ++++++++-----------
 .../hosts/details/cards/Policies/_styles.scss | 21 +++++++++++++++++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss
index e35adc694e..1f73d3bed7 100644
--- a/frontend/components/buttons/Button/_styles.scss
+++ b/frontend/components/buttons/Button/_styles.scss
@@ -160,6 +160,7 @@ $base-class: "button";
     font-size: $x-small;
     font-weight: $bold;
     cursor: pointer;
+    white-space: nowrap;
 
     img {
       transform: scale(0.5);
diff --git a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
index 9193620721..afe30ec2a9 100644
--- a/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
+++ b/frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx
@@ -63,19 +63,15 @@ const generatePolicyTableHeaders = (
       Cell: (cellProps) => {
         const { name } = cellProps.row.original;
         return (
-          <>
-            <Button
-              onClick={() => {
-                togglePolicyDetails(cellProps.row.original);
-              }}
-              variant={"text-icon"}
-            >
-              <>
-                {name}
-                <img src={ArrowIcon} alt="View policy details" />
-              </>
-            </Button>
-          </>
+          <Button
+            className={`policy-info`}
+            onClick={() => {
+              togglePolicyDetails(cellProps.row.original);
+            }}
+            variant={"text-icon"}
+          >
+            <span className={`policy-info-text`}>{name}</span>
+          </Button>
         );
       },
     },
diff --git a/frontend/pages/hosts/details/cards/Policies/_styles.scss b/frontend/pages/hosts/details/cards/Policies/_styles.scss
index 22cce84f92..e41e9b87dc 100644
--- a/frontend/pages/hosts/details/cards/Policies/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Policies/_styles.scss
@@ -13,7 +13,7 @@
     .data-table__table {
       thead {
         .name__header {
-          width: $col-md;
+          min-width: $col-md;
         }
         .response__header {
           width: 0;
@@ -25,6 +25,10 @@
       }
       tbody {
         tr {
+          .name__cell {
+            max-width: 0; // sets ellipses
+          }
+
           .policy-link {
             visibility: hidden;
             text-overflow: none;
@@ -39,6 +43,21 @@
               text-overflow: none;
             }
           }
+          .policy-info {
+            width: 100%; // sets ellipses
+            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);
+            }
+          }
         }
       }
     }