Horizontal legend narrow format bug

[odow]

Narrow screens cause horizontal legends with lots of entries to bug.

https://codepen.io/odow/pen/mEarpy

In this example, the three column layout is fine, but when the width forces a two column layout, the legend is no longer below the plot area but on top of, and scrolling is enabled.

[n-riesco]

The problem is in the current algorithm to position the legend. The algorithm goes like this:

1. Plotly tries to locate the legend at the requested x and y.
2. If the legend doesn't fit there, Plotly tries to expand the plot margins.
3. If, after expanding the margins, any of the sides of the legend box is still outside the plotting area, Plotly resizes the legend box to fit into the plotting area (This is what we're seeing in the codepen example above; the top and bottom sides of the legend box were outside the plotting area, and Plotly has moved them into the plotting area).
4. If, after resizing, the legend doesn't fit into the legend box, a vertical scrollbar is added.

In the case of horizontal legends that don't fit into the plotting area (even after trying to expand the margins), this algorithm ends up with a legend box that covers the whole plotting area.

I guess that the first question to answer is what Plotly should do with horizontal legends that don't fit the plotting area (even after expanding the plot margins).

[etpinard]

@odow Thanks for the report.

This appears to be related to the same underlying logic as #771

I'll merge both these issues together.