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" > - {name} + ); }, 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);