Skip to content

Commit

Permalink
[ResponseOps][Cases]Issues with List Display on Different Viewports (#…
Browse files Browse the repository at this point in the history 
…201785)

Closes #169196

## Summary

- The columns 'created at', 'updated at', 'closed at', 'severity', and
'external incident' were missing the 'width' property, resulting in a
display issue where these columns appeared squeezed on screen
resolutions below 1450px.
- To address this, the 'width' properties for these columns have been
added and adjusted to ensure proper display


https://github.com/user-attachments/assets/b5d6735e-49b8-4b35-9648-a1ea1b30e1ef
  • Loading branch information
@georgianaonoleata1904
georgianaonoleata1904 authored Nov 29, 2024
1 parent 80e4911 commit f336993
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 28 deletions.
67 changes: 44 additions & 23 deletions x-pack/plugins/cases/public/components/all_cases/use_cases_columns.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,12 +83,13 @@ describe('useCasesColumns ', () => {
"name": "Name",
"render": [Function],
"sortable": true,
"width": "20%",
"width": "17%",
},
Object {
"field": "assignees",
"name": "Assignees",
"render": [Function],
"width": "10%",
},
Object {
"field": "tags",
Expand All @@ -101,50 +102,54 @@ describe('useCasesColumns ', () => {
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
"width": "70px",
},
Object {
"align": "right",
"field": "totalComment",
"name": "Comments",
"render": [Function],
"width": "90px",
"width": "75px",
},
Object {
"field": "category",
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "updatedAt",
"name": "Updated on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "closedAt",
"name": "Closed on",
"render": [Function],
"sortable": true,
"width": "10%",
},
Object {
"name": "External incident",
"render": [Function],
"width": "10%",
},
Object {
"field": "status",
"name": "Status",
"render": [Function],
"sortable": true,
"width": "110px",
"width": "100px",
},
Object {
"field": "severity",
Expand Down Expand Up @@ -185,12 +190,13 @@ describe('useCasesColumns ', () => {
"name": "Name",
"render": [Function],
"sortable": true,
"width": "20%",
"width": "17%",
},
Object {
"field": "assignees",
"name": "Assignees",
"render": [Function],
"width": "10%",
},
Object {
"field": "tags",
Expand All @@ -203,44 +209,47 @@ describe('useCasesColumns ', () => {
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
"width": "70px",
},
Object {
"align": "right",
"field": "totalComment",
"name": "Comments",
"render": [Function],
"width": "90px",
"width": "75px",
},
Object {
"field": "category",
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "updatedAt",
"name": "Updated on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"name": "External incident",
"render": [Function],
"width": "10%",
},
Object {
"field": "status",
"name": "Status",
"render": [Function],
"sortable": true,
"width": "110px",
"width": "100px",
},
Object {
"field": "severity",
Expand Down Expand Up @@ -291,13 +300,14 @@ describe('useCasesColumns ', () => {
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "severity",
Expand All @@ -309,6 +319,7 @@ describe('useCasesColumns ', () => {
Object {
"align": "right",
"render": [Function],
"width": "70px",
},
],
"isLoadingColumns": false,
Expand Down Expand Up @@ -340,13 +351,14 @@ describe('useCasesColumns ', () => {
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "severity",
Expand All @@ -358,6 +370,7 @@ describe('useCasesColumns ', () => {
Object {
"align": "right",
"render": [Function],
"width": "70px",
},
],
"isLoadingColumns": false,
Expand Down Expand Up @@ -389,13 +402,14 @@ describe('useCasesColumns ', () => {
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "severity",
Expand All @@ -407,6 +421,7 @@ describe('useCasesColumns ', () => {
Object {
"align": "right",
"render": [Function],
"width": "70px",
},
],
"isLoadingColumns": false,
Expand All @@ -430,7 +445,7 @@ describe('useCasesColumns ', () => {
"name": "Name",
"render": [Function],
"sortable": true,
"width": "20%",
"width": "17%",
},
Object {
"field": "tags",
Expand All @@ -443,44 +458,47 @@ describe('useCasesColumns ', () => {
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
"width": "70px",
},
Object {
"align": "right",
"field": "totalComment",
"name": "Comments",
"render": [Function],
"width": "90px",
"width": "75px",
},
Object {
"field": "category",
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "updatedAt",
"name": "Updated on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"name": "External incident",
"render": [Function],
"width": "10%",
},
Object {
"field": "status",
"name": "Status",
"render": [Function],
"sortable": true,
"width": "110px",
"width": "100px",
},
Object {
"field": "severity",
Expand Down Expand Up @@ -538,7 +556,7 @@ describe('useCasesColumns ', () => {
"name": "Name",
"render": [Function],
"sortable": true,
"width": "20%",
"width": "17%",
},
Object {
"field": "tags",
Expand All @@ -551,44 +569,47 @@ describe('useCasesColumns ', () => {
"field": "totalAlerts",
"name": "Alerts",
"render": [Function],
"width": "80px",
"width": "70px",
},
Object {
"align": "right",
"field": "totalComment",
"name": "Comments",
"render": [Function],
"width": "90px",
"width": "75px",
},
Object {
"field": "category",
"name": "Category",
"render": [Function],
"sortable": true,
"width": "120px",
"width": "12%",
},
Object {
"field": "createdAt",
"name": "Created on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"field": "updatedAt",
"name": "Updated on",
"render": [Function],
"sortable": true,
"width": "15%",
},
Object {
"name": "External incident",
"render": [Function],
"width": "10%",
},
Object {
"field": "status",
"name": "Status",
"render": [Function],
"sortable": true,
"width": "110px",
"width": "100px",
},
Object {
"field": "severity",
Expand Down
Loading

0 comments on commit f336993

Please sign in to comment.