Off Center Sliders When Strings are Long

[KatieWoe]

Test device:
Dell Laptop + others
Operating System:
Windows 10 + others
Browser:
Chrome + others
Problem description:
For phetsims/qa/issues/153
When stringTest=long is used the sliders on Intro, Vectors, and Energy screens become off center. To compare, this does not seem to happen on the Lab screen. It also does not occur in the pendulum simulation.
Steps to reproduce:

1. Use the stringTest=long
2. Go to any of the first three screens.
3. The sliders will be noticeably off center.

Screenshots:
Off Center from Energy Screen

On Center comparison from Lab Screen

Troubleshooting information

Name: ‪Masses and Springs‬ URL: https://bayes.colorado.edu/dev/html/masses-and-springs/1.0.0-rc.2/phet/masses-and-springs_all_phet.html Version: 1.0.0-rc.2 2018-07-25 04:03:02 UTC Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36 Language: en-US Window: 1536x737 Pixel Ratio: 2.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {"assert":{"sha":"928741cf","branch":"HEAD"},"axon":{"sha":"37d5839c","branch":"HEAD"},"brand":{"sha":"89d28f63","branch":"HEAD"},"chipper":{"sha":"bc1f66fe","branch":"HEAD"},"dot":{"sha":"bd4d7035","branch":"HEAD"},"griddle":{"sha":"7be25724","branch":"HEAD"},"joist":{"sha":"85b10c15","branch":"HEAD"},"kite":{"sha":"3b76b24a","branch":"HEAD"},"masses-and-springs":{"sha":"7d16369b","branch":"HEAD"},"phet-core":{"sha":"e0cec207","branch":"HEAD"},"phet-io":{"sha":"e5c7148f","branch":"HEAD"},"phet-io-wrapper-classroom-activity":{"sha":"5204ea8e","branch":"HEAD"},"phet-io-wrapper-lab-book":{"sha":"ccaaaa4b","branch":"HEAD"},"phet-io-wrappers":{"sha":"f3701e8d","branch":"HEAD"},"phetcommon":{"sha":"80414edb","branch":"HEAD"},"query-string-machine":{"sha":"1f2322e4","branch":"HEAD"},"scenery":{"sha":"3b05db54","branch":"HEAD"},"scenery-phet":{"sha":"f37bff38","branch":"HEAD"},"sherpa":{"sha":"ded365aa","branch":"HEAD"},"sun":{"sha":"00b9c74c","branch":"HEAD"},"tandem":{"sha":"3e1c8fd3","branch":"HEAD"},"twixt":{"sha":"050e8f19","branch":"HEAD"}}

[Denz1994]

Maxwidths have been adjusted to the slider titles so the panel contents don't get shifted out of proportion. Can you confirm in master @KatieWoe and if it looks good, close this issue?

[KatieWoe]

The sliders no longer seem to be off center. However, it seems that a string is now being split on the Lab Screen.

[arouinfar]

Maxwidths have been adjusted to the slider titles so the panel contents don't get shifted out of proportion

@Denz1994 the new maxwidths seem pretty small to me, and I'm worried Gravity and Damping won't internationalize well.

master:

rc.2:

I'd say keeping an appropriate maxwidth is a more important than an off-center UI component when the strings are unrealistically long. That said, it is very strange that the layout gets shifted at all...

[Denz1994]

Let's try master now. What do you think @arouinfar @KatieWoe? The reducing the max width of the readout is the cleanest means of making room for all of the other components.

[KatieWoe]

The string is no longer being split. The sliders are back to being off center, but I think we decided that was less important.

[arouinfar]

The layout in master looks fine to me, though I did reopen #293 because the panel isn't properly expanding.

I'll go ahead and close this issue. Thanks @Denz1994!