Host Details Page: Policy table truncates policy name (#5087)

This commit is contained in:
RachelElysia 2022-04-12 16:31:07 -04:00 committed by GitHub
parent 015bfb877f
commit 46e323cd9c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 14 deletions

View file

@ -160,6 +160,7 @@ $base-class: "button";
font-size: $x-small;
font-weight: $bold;
cursor: pointer;
white-space: nowrap;
img {
transform: scale(0.5);

View file

@ -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>
);
},
},

View file

@ -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);
}
}
}
}
}