Nav bar icons crowded with dynamic long strings

[KatieWoe]

Test device Samsung Operating System Win 11 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/1165 When string get a longer dynamically (not with stringTest=long) the icons in the nav bar can get a bit crowded. The text buts up against the text of the next icon and the highlights overlap. Compare to long string from stringTest=long. This is fairly minor, and may show up elsewhere but missed.

Visuals Dynamic long strings Non-dynamic long strings

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Vector Addition‬ URL: https://phet-dev.colorado.edu/html/vector-addition/1.1.0-rc.1/phet/vector-addition_all_phet.html Version: 1.1.0-rc.1 2024-11-06 21:59:28 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Language: en-US Window: 1536x695 Pixel Ratio: 1.25/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: 32767x32767 OES_texture_float: true Dependencies JSON: {}

[KatieWoe]

Edit to add, they can also be misaligned if they change by different lengths.

[pixelzoom]

Reproduced in main and 1.1.0-rc.1, for example:

The good news is that this was not a problem other recent sims that have been tested, for example reactants-products-and-leftovers_en_phet.html:

So I suspect that a regression has been introduced in joist.

[pixelzoom]

These problems are also present in 1.1.0-dev.5 which was used for dev tests https://github.com/phetsims/qa/issues/1163 and https://github.com/phetsims/qa/issues/1164.

[pixelzoom]

It looks like this problem is specific to the screen names in Vector Addition. I do not see the same problem in main for RPAL, for example.

And the problem has been around for awhile -- I it in Vector Addition 1.1.0-dev.3 from 7/11/2023.

Maybe a font metrics problem? Maybe because the overlapping screen names contain numbers? (Explore 1D, Explore 2D)

[pixelzoom]

Maybe a font metrics problem? Maybe because the overlapping screen names contain numbers? (Explore 1D, Explore 2D)

I tried replacing the numbers with characters (e.g. "Explore AD", "Explore BD"), and there was no change. I think there's just something buggy with the navbar layout that is being exposed by these particular screens names.

And it only seems to be a problem with the first 2 screen names, because it's reproducible with ?screens=1,2&stringTest=dynamic:

[Nancy-Salpepi]

I opened up a similar issue a while back relating to color vision: https://github.com/phetsims/joist/issues/982

[pixelzoom]

Thanks @Nancy-Salpepi. I've reopened https://github.com/phetsims/joist/issues/982 - unfortunate that it was closed without addressing.

[pixelzoom]

Discussed with @arouinfar. This is not blocking for the 1.1 release, and we'll close this as "won't fix".

Thanks for reporting @KatieWoe. It resulted in https://github.com/phetsims/joist/issues/982 getting reopened, so hopefully it will be prioritized and addressed.

Closing.