Increase various column widths with text that are now cut off due to …

…new sortable icon + use first custom `responsiveBreakpoint` to handle table with lots of columns!! 🎉
elastic · Apr 18, 2024 · 718fc3c · 718fc3c
1 parent fa99ad8
commit 718fc3c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/...ins/saved_objects_management/public/management_section/objects_table/components/table.tsx b/...ins/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/...lugins/observability_solution/infra/public/pages/metrics/hosts/components/hosts_table.tsx b/...lugins/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/...plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx b/...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',