Panels cover molecule and button using stringTest=long

[Nancy-Salpepi]

Test device MacBook Air (m1 chip)

Operating System 11.6

Browser Safari

Problem description https://github.com/phetsims/qa/issues/715

Using stringTest=long:

1. In the Model Screen, the molecule is partially covered by the panels.
2. In the Real Molecules Screen, the Model Button and the Molecule Panel overlap.

Visuals

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Molecule Shapes‬ URL: https://phet-dev.colorado.edu/html/molecule-shapes/1.4.0-dev.1/phet/molecule-shapes_all_phet.html Version: 1.4.0-dev.1 2021-10-07 21:09:50 UTC Features missing: touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15 Language: en-US Window: 1199x675 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 31 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[Nancy-Salpepi]

https://github.com/phetsims/qa/issues/716

Using MacBook Air + Safari I am also seeing similar issues in Molecule Shapes: Basics.

Using stringTest=long, the molecules are partially covered by panels in the Model and Real Molecules Screens.

[jonathanolson]

Should be working well with stringTest=long (ensure pulling sun if using phettest). Can you verify?

[Nancy-Salpepi]

Hey @jonathanolson! None of the side panels cover the molecule or model button anymore. The bottom panel seems to get unusually wide with stringTest=long. I feel like usually, the text gets really small, to the point of being unreadable, instead of the panel get extremely large. There are a few instances where this panel overlaps the molecule in both stringTest=long and stringTest=double, but they aren't as severe like in my original comment.

[jonathanolson]

@arouinfar, how much should I limit the size of the panels? It looks like that example also will go "behind" the model/real radio buttons.

[arouinfar]

@jonathanolson I think there could have been a regression. The max widths all look reasonable with stringTest=long in the published version:

[jonathanolson]

This is the current behavior after fixes:

However the behavior described in https://github.com/phetsims/molecule-shapes/issues/192#issuecomment-961312406 is still broken on the production version:

[jonathanolson]

For reference, I've added a maxWidth on the panel title (mainly for other things, but it applies here).

So... is that acceptable overlap on the bottom panel? Is there anything I should do here?

[arouinfar]

So... is that acceptable overlap on the bottom panel? Is there anything I should do here?

Yes, I think so. The overlap doesn't fully hide the structure, and the molecule can be rotated to remove the overlap

[jonathanolson]

Ok, will mark as ready for QA then (if there's something to do, reassign me).

[Nancy-Salpepi]

Looks good.