[RAC] Observability Alerts table should be responsive

[mgiota]

📝 Summary

The Observability alerts table at the moment is not responsive in smaller screen resolutions. The reason field gets cut off. If user adds more columns in the table, more columns would be cut off as well. The existing horizontal scrollbar gets cut off and doesn't allow the rest columns to be shown.

✔️ Acceptance criteria

As a short term solution we should make sure the horizontal scrollbar works and all columns are visible similar to Security solution.

[elasticmachine]

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

[jasonrhodes]

I'd be surprised if EUI Data Grid doesn't have a simple way to make itself responsive. CC: @elastic/eui-design

[cchaos]

It does not 😉 . EuiDataGrid is meant to me an excel-like experience so it does overflow it's container and adds scrolling. Only the EuiBasicTable has built-in mobile views.

[weltenwort]

Maybe I'm misinterpreting it, but I think the term "responsive" is not quite meant as strictly here. This is mostly about the grid reacting to size changes of its container, even if only by adding overflow scrollbars instead of columns just rendering off-screen.

I think that is something the data grid is capable of according to the EUI docs, but something in the t-grid or the its embedded breaks that capability.

[mgiota]

@weltenwort I think you got it right. This issue is about making sure we have at least a horizontal scrollbar that works well and reacts to size change of its container. At the moment while I keep resizing the browser, it doesn't do what it is supposed to do, whereas if I refresh the browser it works well and all columns get rendered within the scrollable area.

[afgomez]

@mgiota @jasonrhodes this seems to be fixed on device.

Screen.Recording.2021-08-19.at.16.51.59.mov

Resizing also seems to work correctly

Screen.Recording.2021-08-19.at.16.54.49.mov

The only issue I see is that the Updated X time ago overlaps, but that will be fixed once we tackle the last element in #107629