Fleet UI: Fix tables that bleed over on smaller screens (#9475)

changes/9461-table-bugs

@@ -0,0 +1 @@
+- Clean tables at smaller screen widths

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

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

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;
+  }
 }

frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx

@@ -105,7 +105,7 @@ const generateTableHeaders = (options: {
       accessor: "name",
       Cell: (cellProps: ICellProps): JSX.Element => (
         <LinkCell
-          classes="w250-sm"
+          classes="w250"
           value={cellProps.cell.value}
           path={PATHS.EDIT_POLICY(cellProps.row.original)}
         />

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

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;

frontend/pages/schedule/ManageSchedulePage/components/ScheduleTable/ScheduleTableConfig.tsx

@@ -121,7 +121,7 @@ const generateTableHeaders = (
       disableSortBy: true,
       accessor: "query_name",
       Cell: (cellProps: ICellProps): JSX.Element => (
-        <TextCell classes="w400" value={cellProps.cell.value} />
+        <TextCell value={cellProps.cell.value} />
       ),
     },
     {