Grouped Horizontal Legend Cut Off

Usually when using horizontal legend, if the names are too long to place horizontally next to each other, they become stacked which is the desired behavior. However, if I use legend groups, this stacking does not happen and they are placed horizontally, and the legend is cut off.

Here is an example: https://codepen.io/anon/pen/Rjomrg

How do I keep the vertical stacking? Is this desired behavior and I need to specify some different option, or is this a bug?

EDIT: Fixed the problem by just not using horizontal orientation, and setting y coordinate of legend to -0.3