diff --git a/changes/9461-table-bugs b/changes/9461-table-bugs new file mode 100644 index 0000000000..16ef1e9ba4 --- /dev/null +++ b/changes/9461-table-bugs @@ -0,0 +1 @@ +- Clean tables at smaller screen widths diff --git a/frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx b/frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx index c3531207c8..c27dc61b1c 100644 --- a/frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx +++ b/frontend/components/TableContainer/DataTable/LinkCell/LinkCell.tsx @@ -17,7 +17,7 @@ const LinkCell = ({ value, path, title, - classes = "w250", + classes, }: ILinkCellProps): JSX.Element => { const onClick = (): void => { browserHistory.push(path); diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss index 301031827a..38e283dd67 100644 --- a/frontend/components/TableContainer/DataTable/_styles.scss +++ b/frontend/components/TableContainer/DataTable/_styles.scss @@ -55,7 +55,8 @@ $shadow-transition-width: 10px; white-space: initial; // wraps long text with tooltip } - tr, .single-row { + tr, + .single-row { transition: background-color 150ms ease-out; &:hover { background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow @@ -307,15 +308,4 @@ $shadow-transition-width: 10px; display: flex; align-items: center; } - @media screen and (max-width: 1025px) { - .data-table { - tbody { - td { - .w250-sm { - max-width: calc(250px - 48px); - } - } - } - } - } } diff --git a/frontend/components/TableContainer/_styles.scss b/frontend/components/TableContainer/_styles.scss index d8919ee4d0..98bf0ee6cf 100644 --- a/frontend/components/TableContainer/_styles.scss +++ b/frontend/components/TableContainer/_styles.scss @@ -166,4 +166,12 @@ .fleet-checkbox__tick { top: 1px; } + + // Truncates clickable button cells + .children-wrapper { + overflow: hidden; + white-space: nowrap; + display: block; + text-overflow: ellipsis; + } } diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx index d91c1d2966..62d2318e6c 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx @@ -105,7 +105,7 @@ const generateTableHeaders = (options: { accessor: "name", Cell: (cellProps: ICellProps): JSX.Element => ( diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss index 92af0cf03b..403f62ebf1 100644 --- a/frontend/pages/queries/ManageQueriesPage/_styles.scss +++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss @@ -131,6 +131,14 @@ .name__cell { max-width: $col-lg; } + + @media (max-width: $break-990) { + .name__cell { + .w400 { + max-width: calc(400px - 81px); + } + } + } .platforms__cell { max-width: $col-md; } diff --git a/frontend/pages/schedule/ManageSchedulePage/_styles.scss b/frontend/pages/schedule/ManageSchedulePage/_styles.scss index 5268debf8c..3d22a89ec4 100644 --- a/frontend/pages/schedule/ManageSchedulePage/_styles.scss +++ b/frontend/pages/schedule/ManageSchedulePage/_styles.scss @@ -92,6 +92,7 @@ tbody { .query_name__cell { width: $col-lg; + max-width: 175px; // Truncates at smaller widths } .interval__cell { width: auto; diff --git a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTableConfig.tsx b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTableConfig.tsx index 6270977058..da90969349 100644 --- a/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTableConfig.tsx +++ b/frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTableConfig.tsx @@ -121,7 +121,7 @@ const generateTableHeaders = ( disableSortBy: true, accessor: "query_name", Cell: (cellProps: ICellProps): JSX.Element => ( - + ), }, {