Data grid: Take scrollbar into account

[flash1293]

Summary

Fixes #4457

I'm surprised it was that easy, but it works fine for the cases I tested (maybe I missed some?). This PR makes sure the vertical scroll bar is taken into account on auto-sizing data grid columns.

To do so, it's simply looking up the clientWidth property of the virtualization container instead of the width of the wrapper container as a reference width. To guard against unforeseen race conditions, it's falling back to the container width if that doesn't work for some reason.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes

• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
  - [ ] Props have proper autodocs and playground toggles
  - [ ] Added documentation
  - [ ] Checked Code Sandbox works for the any docs examples
  - [ ] Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  -~ [ ] Checked for accessibility including keyboard-only and screenreader modes~
• A changelog entry exists and is marked appropriately

[flash1293]

cc @chandlerprall

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/

[chandlerprall]

Playing with the examples, found two spots this change doesn't cover:

• on the main datagrid example, enter full screen and increase pagesize to 100 - both scrollbars appear when only vertical is needed
• in the virtualization example, switching to Unconstrained height includes both scrollbars instead of only horizontal

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/

[flash1293]

@chandlerprall OK, this caused some issues :)

To make sure the scrollbar width is always taking into account, I had to specifically re-check the width on page size change, but there is no hook to be sure the dom has relayouted and the scrollbar is visible now, so I have to wait for a fixed number of milliseconds before measuring.

Also, I needed to add a resize observer for the virtualize container specifically to make sure I get notified for all of the changes.

I think I got all the cases and it works, but I'm not really happy with the approach, because it's causing additional re-renders - in most cases it's not visible but it worsens the performance a bit again.

Please take a look and let me know what you think. I can think of one other way how to approach this - instead of measuring the actual virtualized container width, calculating it so we know the right width from the start (rendering the outer container, taking its width and height, checking for current pagination and assumed cell height whether we will get a scrollbar, then subtracting it from the outer container width). It seems very brittle though (because the actual layout can diverge from the calculation due to a number of things, causing the grid to render with the wrong width) and it would be necessary to refactor a lot about the current data_grid / data_grid_body separation.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/

[snide]

Thanks @flash1293! Did a functional review. Works as described. Will leave the code review to @chandlerprall.

[chandlerprall]

will merge on passing CI

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4468/