Wave Packet screen - control panel overlaps ResetAllButton on Chromebook

[arouinfar]

The control panel on the Wave Packet screen overlaps with the ResetAllButton on Chromebook, so we'll need to tighten things up a bit.

@pixelzoom here are some things we can try to save space:

• Reduce the size of the component spacing tool icons
• Shift ResetAllButton down a few px

[pixelzoom]

This is undoubtedly due to differences in font size.

Reducing the size of the component spacing tool icons is a good thought. But if I make them smaller, you won't be able to see the label. @arouinfar Can I omit the label from those icons? We don't include the icon on the width indicator icon.

I'm also going to add maxHeight to the control panel, for a bit of extra protection. In the event that the control panel does exceed the available vertical space, the control panel will be uniformly scaled down to fit.

[arouinfar]

Yes, let's go ahead and lose the tool icon labels. We often use iconic representations for tools as checkbox labels and I think it's a reasonable thing to do here too.

[pixelzoom]

Hmm... I didn't think I'd miss the labels, but I do. Now I'm left wondering (or trying to remember) which tool is which. Maybe that's OK. Or we could put the labels to the left of the icons?

@arouinfar thoughts?

With labels:

Without labels:

[pixelzoom]

Labels to the left of icons looks best to me, to I went with that. It doesn't both me that the label is in a different location than it is on the interactive tool. And as a bonus, we can make the labels a bit larger. Screenshot below.

I also set maxWidth and maxHeight for the control panel, as a fallback. In case we miss something, this will guarantee that the control panel doesn't overlap anything. Tested with ?stringTest.

@arouinfar please review in master.

[arouinfar]

Thanks @pixelzoom! I really like the labels on the left. The unlabelled tools didn't look as good as I thought they would.