Sim doesn't gracefully handle internationalization

[aaronsamuel137]

During code review #56, when running the sim ?stringTest=double, I noticed this behavior:

Ideally, we want to account for the fact that strings might be longer in translated versions of the sim. In this case, we want to ensure that strings don't extend outside of the popup box, and ideally we want the two panels to continue to be the same width.

[aaronsamuel137]

Also, the energy graph text overlaps with the button:

[andrey-zelenkov]

Fixed internationalization for body items menu and small fix for energy box title (it's seems a little better). I could only fix issue by adding option titleAlignX: 'right' ('titleXSpacing' didn't work) but I thought that not correct way. I will be grateful for advise how to fix it. Reassign to @aaronsamuel137.

[aaronsamuel137]

It seems like the way to go here is to decide on a maximum width for the text, and then scale down the text if it exceeds this maximum. Choose a max width that makes sense for the layout to continue looking good.

See https://github.com/phetsims/molecules-and-light/issues/8 for an example of addressing this issue in another sim, and let me know if you have questions.

[andrey-zelenkov]

Fixed energy box title internationalization by adding 'titleAlignX' and 'titleXMargin'. There was a problem with scaling that it was really difficult to read small text for long strings. Hope this fix is not too much worse than proposed by @aaronsamuel137. Reassign to @aaronsamuel137 for verification.

[aaronsamuel137]

The fix for the energy box title looks good to me. Thanks.

Is there any way you could adjust the right hand panels too? It would be good if:

1. The two panels stayed the same width
2. The sliders in the top panel stayed centered (though the text can stay left aligned)

[andrey-zelenkov]

Fixed panel width and slider position. Reassign to @aaronsamuel137 for verification.

[aaronsamuel137]

Looks good. Closing.