[Table Vis] Fix visualization overflow

[sulemanof]

Summary

In some cases when a visualization has a horizontal scrollbar (table vis in this case),
the editor sidebar goes out of screen:

The issue was firstly mentioned here: elastic/eui#2701 (comment)
but since the Resizable component is not ready yet, I think it worth a fix in the kibana codebase

Checklist

Delete any items that are not applicable to this PR.

• 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
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
• This was checked for cross-browser compatibility, including a check against IE11

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[cchaos]

It looks like the proper fix would be to ensure that the calculations of the panel widths take the width of the resizer into account, which it currently does not. For example, the left side width is 71.6177% and the right side width is 28.3735% which adds up to ~100%.

I worry that adding a blanket overflow: auto may add unnecessary scrollbars to particular visualizations that may not be want we want. This page is notoriously nested and there was a lot of work ensuring it's ok across the different viz types.

I would instead, fix the calculation of the resizer, even if it just ends up applying the width as a calc. EG: width: calc(71.6177% - 12px)

[sulemanof]

It looks like the proper fix would be to ensure that the calculations of the panel widths take the width of the resizer into account, which it currently does not. For example, the left side width is 71.6177% and the right side width is 28.3735% which adds up to ~100%.

I worry that adding a blanket overflow: auto may add unnecessary scrollbars to particular visualizations that may not be want we want. This page is notoriously nested and there was a lot of work ensuring it's ok across the different viz types.

I would instead, fix the calculation of the resizer, even if it just ends up applying the width as a calc. EG: width: calc(71.6177% - 12px)

The issue is not caused by the resizer width here, you could even remove it from the DOM to reproduce it:

In 7.6 there was one layer nested less :

where the visEditor__canvas takes care of overflow: auto.

But now there is a parent div added with class visEditor__visualization :

So adding this rule won't break up any existing vis, since they are already overflowed in a child div.
At least I didn't notice any break in other visualizations

[cchaos]

Ok I've tested it further and can reproduce. I had to shrink my screen's width in order to see the sidebar width get smaller than the min-width of 350px.

Can you change this to hidden though, as then we know we won't get unwanted scrollbars and it will force the inner child to show the scrollbars instead.

Suggested change

	overflow: auto;
	overflow: hidden;

[sulemanof]

Ok, done

[cchaos]

👍 I only checked this in Chrome. Probably worth checking in FF & IE11

[flash1293]

Tested in Chrome and Firefox and works for me - couldn't convince IE to start up.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9a441b9

History

• 💚 Build #39294 succeeded 93fa5e0
• 💚 Build #38911 succeeded 385b47c

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream