About dialog is scaled incorrectly

[loganbraywork]

Test device

Windows 10 laptop

Operating System

Windows 10 v.1903

Browser

Chrome Version 83.0.4103.116

Problem description

For phetsims/qa#514

The about screen seems to be slightly cut off at the top. Adjusting the size of the screen did not seem to alter or remedy the issue.

Visuals

Troubleshooting information:
!!!!! DO NOT EDIT !!!!!
Name: ‪pH Scale‬
URL: https://phet-dev.colorado.edu/html/ph-scale/1.4.0-rc.1/phet/ph-scale_all_phet.html
Version: 1.4.0-rc.1 2020-07-09 22:04:23 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36
Language: en-US
Window: 1433x706
Pixel Ratio: 1.3406250476837158/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: 4095
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[pixelzoom]

Reproduced (sort of) on macOS 10.15.5 with Chrome 83, see screenshot below.

To reproduce:

1. Run the sim with ?dev to show ScreenView layoutBounds as a red rectangle.
2. Make browser window wide and not very tall, as in screenshot below.
3. Select a screen on home page.
4. Open About dialog. It should be fully within the ScreenView's layoutBounds, not overlapping the navigation bar, or otherwise outside the red rectangle.

This seems to be a problem with all browsers. When the browser window is wider than the ScreenView's layoutBounds, the About dialog is being scaled incorrectly.

I suspect that this is not specific to AboutDialog, and is likely a problem with scaling of all Dialogs. We'll need to find out who worked on Dialog most recently, and investigate. @ariel-phet please prioritize (high?) and assign.

[samreid]

Should this block publication? Should recent RCs with this bug be maintenance released? Is it related to phetsims/joist#586 ?

[pixelzoom]

Yes, I think this should block publication of ph-scale and all sims. Dialogs should stay within the ScreenView layoutBounds.

No idea if it's related to phetsims/joist#586. That issue has been assigned to me for weeks. I haven't been involved in Dialog scaling, and it's going to take time that I don't have. My recommedation is to track down whoever last worked on Dialog scaling and have them work on fixing both issues.

[pixelzoom]

This problem gets worse as the height of AboutDialog increases. Here's what ph-scale master looks like with a bunch of lines added to the credits:

Interesting is that it's handled properly on the Home screen. I thought there had been a bunch of work done to make the Home screen be "just another screen" ??

[pixelzoom]

A workaround was applied in phetsims/joist#639. It's not a final solution, but @ariel-phet asked for the workaround in order to move ph-scale forward. In pH Scale, About dialog now fits inside the layoutBounds, see screenshot below.

[pixelzoom]

• Patch this fix into the 1.4 release branches for ph-scale and ph-scale-basics.

[pixelzoom]

To verify in the next RC:

1. Run the sim with ?dev to display layoutBounds (red rectangle) around screens.
2. Open the About dialog from the PhET, verify that it fits inside the layoutBounds on the home screen (if it has one) and 1 other non-home screen, and that it's the same size in both places.

[KatieWoe]

Looks ok in 1.5.0-dev.1 on Win 10 Chrome. Closing