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 => (
-
+
),
},
{