[EuiBasicTable] Fix limited expandable row height

[nyurik]

Summary

In some cases the max-height of a table row needs to be more than 1000px when expanded - for example when the table contains a large sub-table. I tried setting 100% { max-height: max-content}, but the expansion animation was not smooth, so instead added a two step animation -- to 1000px at 90%, and to max-content at 100%. I do not know if max-content is the right choice here, not an expert TBH.

Fixes #3854

Checklist

• [ ] Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Safari and Firefox
• [ ] Props have proper autodocs
• [ ] 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

[kibanamachine]

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

[kibanamachine]

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

[kibanamachine]

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

[cchaos]

🥇 Nice solution and thanks for the catch on this one.

This does cause a bit of an animation jank if the content reaches the 1000px height mark and then it's not longer a smooth animation to get to it's full height, but I think that's ok and hardly that noticeable with such a large max-height.

I did have a suggestion though to make that "jank" less visible which is to set the valued max-height to 100vh which should mean that the jank doesn't happen until the content is so tall it can't fit the full viewport height. Also, I think we can get even close to the 100% mark by changing 90% to 99%. I forked your original codesandbox with this solution and it seems to work well: https://codesandbox.io/s/nested-table-bug-forked-z232s

I also checked the browser support fo max-content and it looks good with only IE not supporting it which we basically just dropped support for anyway 👍

I updated your PR summary's checklist with items that need to be done to finish this PR up. Basically, it just really needs to be tested in a couple other browsers and a Changelog item added.

[kibanamachine]

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

[nyurik]

Thanks @cchaos , I have added an entry to CHANGELOG, and tried your sandbox on Firefox 79 (Linux) and Android. I do not have access to Safari.

[cchaos]

Looks like you might not have pushed you change to the Changelog?

[nyurik]

@cchaos dope, thx, silly me, pushed it to my own repo instead of origin. Fixed and merged from master.

[cchaos]

Eeek, it looks like we've got an issue in Safari. I don't think it's respecting that max-content. It animates open then shrinks back down essentially only becoming as tall as what the padding provides.

I'll try to play around some more with acceptable values for the 100% mark.

[kibanamachine]

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

[nyurik]

Sigh, seems like pretty soon both FF and safari will disappear due to all these incompatibilities... And chrome will be renamed into IE13 :). Thanks for catching it!

[kibanamachine]

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

[cchaos]

👍 Tested in Safari, Firefox, and Chrome. Nothing changes if the content is still smaller than the 100vh, but this is also a good solution if the consumer provides their own max-height for overflow too.