Increase various column widths with text that are now cut off due to new sortable icon

cee-chen · cee-chen · commit 718fc3cb1695 · 2024-04-17T22:57:44.000-07:00
+ use first custom `responsiveBreakpoint` to handle table with lots of columns!! 🎉
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx
@@ -234,7 +234,7 @@ export class Table extends PureComponent<TableProps, TableState> {
         name: i18n.translate('savedObjectsManagement.objectsTable.table.columnTypeName', {
           defaultMessage: 'Type',
         }),
-        width: '50px',
+        width: '65px',
         align: 'center',
         description: i18n.translate(
           'savedObjectsManagement.objectsTable.table.columnTypeDescription',
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/hosts_table.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/hosts_table.tsx
@@ -41,6 +41,8 @@ export const HostsTable = () => {
       />
       <EuiBasicTable
         data-test-subj={`hostsView-table-${loading ? 'loading' : 'loaded'}`}
+        // This table has a lot of columns, so break down into mobile view sooner
+        responsiveBreakpoint="xl"
         itemId="id"
         selection={selection}
         pagination={{
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx
@@ -203,7 +203,7 @@ export const useHostsTable = () => {
     return items.sort(sortTableData(sorting)).slice(startIndex, endIndex);
   }, [items, pagination, sorting]);
 
-  const metricColumnsWidth = displayAlerts ? '11%' : '15%';
+  const metricColumnsWidth = displayAlerts ? '12%' : '16%';
 
   const columns: Array<EuiBasicTableColumn<HostNodeRow>> = useMemo(
     () => [
@@ -360,7 +360,7 @@ export const useHostsTable = () => {
             formula={formulas?.rx.value}
           />
         ),
-        width: '10%',
+        width: '12%',
         field: 'rx',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-rx',
@@ -375,7 +375,7 @@ export const useHostsTable = () => {
             formula={formulas?.tx.value}
           />
         ),
-        width: '10%',
+        width: '12%',
         field: 'tx',
         sortable: true,
         'data-test-subj': 'hostsView-tableRow-tx',
