Fix clipping of wide vega tooltip tables

[peterschretlen]

Summary

Fixes #33436. An EUI tooltip has a maximum width of 256px (defined in EUI).
But vega tooltip tables (used when rendering key-value pairs of an object) can be up to 400px wide (160px for the key and 240px for the value).

When table rows became wide, they appeared truncated:

This change makes the max width of a vega tooltip the same as the table, giving a result like this when both the key and value exceed the max width:

There is 12px on either side to account for padding

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
  • IE11 / Windows 8.1
  • Chrome 72.0.3626.121 / macOS
  • Firefox 65.0.2 / macOS
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cchaos]

vega visualizations don't seem to load at all in IE11 (due to URL length issues)

You can test IE11 by going into Management > Advanced Settings > [Search for Session] and turn on Store Session in Local Storage

[peterschretlen]

Thanks @cchaos, I changed the local storage setting and was able to verify the change in IE11.

[cchaos]

The current implementation is going to run into issues on smaller devices. I suggest the following changes.

[elasticmachine]

Pinging @elastic/kibana-app

[peterschretlen]

I've revised the change - left the cell widths as they were, and changed the width of the div to be max 100%. To support mobile I've added a media query so the max width is 256px.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[cchaos]

Great, I think that will work better. Just a prettier nit.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[flash1293]

Tested in Chrome and looks good to me (smaller tooltips still seem to work fine)