adjust width of columns for selector view of cases table

elastic · Jan 18, 2023 · 32ba20c · 32ba20c
1 parent 95cc4b2
commit 32ba20c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 12 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
@@ -97,10 +97,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -146,7 +148,7 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "assignees",
@@ -158,14 +160,14 @@ describe('useCasesColumns ', () => {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -190,10 +192,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "80px",
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -276,10 +280,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -359,10 +365,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -437,10 +445,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -520,10 +530,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",
@@ -563,20 +575,20 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -601,10 +613,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "80px",
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -643,20 +657,20 @@ describe('useCasesColumns ', () => {
             "name": "Name",
             "render": [Function],
             "sortable": true,
-            "width": "20%",
+            "width": undefined,
           },
           Object {
             "field": "tags",
             "name": "Tags",
             "render": [Function],
-            "width": "15%",
+            "width": undefined,
           },
           Object {
             "align": "right",
             "field": "totalAlerts",
             "name": "Alerts",
             "render": [Function],
-            "width": "80px",
+            "width": "55px",
           },
           Object {
             "align": "right",
@@ -681,10 +695,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": "80px",
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": "80px",
           },
           Object {
             "field": "status",
@@ -760,10 +776,12 @@ describe('useCasesColumns ', () => {
             "name": "Updated on",
             "render": [Function],
             "sortable": true,
+            "width": undefined,
           },
           Object {
             "name": "External Incident",
             "render": [Function],
+            "width": undefined,
           },
           Object {
             "field": "status",

diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx
@@ -137,7 +137,7 @@ export const useCasesColumns = ({
         }
         return getEmptyTagValue();
       },
-      width: '20%',
+      width: !isSelectorView ? '20%' : undefined,
     },
   ];
 
@@ -197,7 +197,7 @@ export const useCasesColumns = ({
       }
       return getEmptyTagValue();
     },
-    width: '15%',
+    width: !isSelectorView ? '15%' : undefined,
   });
 
   if (isAlertsEnabled) {
@@ -209,7 +209,7 @@ export const useCasesColumns = ({
         totalAlerts != null
           ? renderStringField(`${totalAlerts}`, `case-table-column-alertsCount`)
           : getEmptyTagValue(),
-      width: '80px',
+      width: !isSelectorView ? '80px' : '55px',
     });
   }
 
@@ -292,6 +292,7 @@ export const useCasesColumns = ({
       }
       return getEmptyTagValue();
     },
+    width: isSelectorView ? '80px' : undefined,
   });
 
   columns.push(
@@ -303,6 +304,7 @@ export const useCasesColumns = ({
         }
         return getEmptyTagValue();
       },
+      width: isSelectorView ? '80px' : undefined,
     },
     {
       field: 'status',