Slight alignment and resizing issues

[DevonQui]

Test device MacBook Pro

Operating System 10.15.1

Browser Safari

Problem description This is for https://github.com/phetsims/QA/issues/511 When doing the stringTest=long query parameter, both the play button and skip forward button appear to lose center. Also the tool bar shrinks for some reason to where it becomes hard to even see what your clicking on.

Steps to reproduce

1. Open up the simulation
2. Click onto the search bar and right after the URL put ?stringTest=long
3. Open up the Water section of the simulation (though it occurs in all three sections) and notice the scaling and centering issues with the tool bar and pause and skip button.

Visuals

//Link for the photo https://drive.google.com/file/d/1JvBQ8vwcwEI_H8WV6tmpjwoNuhSOdl6H/view?usp=sharing

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: 12345678901234567890123456789012345678901234567890 URL: https://phet-dev.colorado.edu/html/waves-intro/1.1.0-dev.24/phet/waves-intro_all_phet.html?stringTest=long Version: 1.1.0-dev.24 2020-10-13 16:44:23 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.80 Safari/537.36 Language: en-US Window: 1440x821 Pixel Ratio: 2/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: 15 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 80) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[loganbraywork]

Same issues occur on Win 10 Chrome & Firefox

[samreid]

I centered the play/pause buttons under the way area, and reduced the maxWidth for the StopwatchNode numberDisplay. @DevonQui I wasn't 100% sure what you meant by "tool bar" in this sentence:

Also the tool bar shrinks for some reason to where it becomes hard to even see what your clicking on.

@arouinfar can you please review?

[arouinfar]

I don't see any layout-breaking issues with stringTest=long in master, though I do wonder if the time scale string in the upper-right corner of the lattice on the Sound and Light screens has a maxWidth. The layout doesn't break because there is lots of room in that part of the sim, but it might be a good practice to give that string a maxWidth, just in case.

I centered the play/pause buttons under the way area

The button group looks a bit offset to the right, not centered @samreid.

[samreid]

The preceding commit https://github.com/phetsims/wave-interference/commit/d8b66f74036a8298342d99b5614ab8702adfff46 centers the "play/pause" button in the middle of the play area. Instead, if I center the time control node, it comes out like this (because the time control node includes "normal/slow":

I don't see an interface for centering the play/pause + step button combination at the moment. @arouinfar how would you like to proceed?

[arouinfar]

@samreid let's center the TimeControlNode under the lattice. That is currently what is done in the latest published versions of waves-intro and wave-interference and it looks quite good. I'm not seeing any issues with stringTest=long either.

[samreid]

Centering it in master currently looks like this:

Should I nudge it to the right a little? Or reduce the maxWidth of topView/SideView? Or reduce the maxWidth of the Normal/Slow buttons?

[arouinfar]

@samreid let's reduce the maxWidth of the Normal/Slow radio buttons to match the Top/Side view. That should reduce the overall width of the TimeControlNode and remove the overlap currently in master.

[samreid]

I set the time control maxWidth to match the maxWidth of the perspective radio button text, and committed. It looks like this:

@arouinfar please review.

[arouinfar]

Looks good to me @samreid