?stringTest queries cause Preferences menu separator below "General Visual Audio" heading to have too small width

[stemilymill]

Win10 Chrome and Firefox

Problem description For https://github.com/phetsims/qa/issues/706 With string test query = x, rtl, or long, the separator line underneath the "General Visual Audio" heading in the Preferences menu changes to a width narrower than the heading

Visuals

Expected:

?stringTest=x

?stringTest=rtl

?stringTest=long (separator matches the width of "General Visual Audio" but not the width of the dialog)

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Balloons and Static Electricity‬ URL: https://phet-dev.colorado.edu/html/balloons-and-static-electricity/1.5.0-rc.1/phet/balloons-and-static-electricity_all_phet.html Version: 1.5.0-rc.1 2021-09-07 23:14:39 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/93.0.4577.63 Safari/537.36 Language: en-US Window: 1418x688 Pixel Ratio: 1.3541666269302368/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: {}

[jessegreenberg]

The separator is currently just as long as the content of the panels in the dialog. Depending on translation, the panels can be quite narrow. But I could also imagine translations where the tabs are very narrow. I think this will be fixed by making the separator as wide as the panels or tabs, whichever is larger.

[jessegreenberg]

Fixed in the above commit, @jbphet assigning to you to cherry pick into a balloons-and-static-electricity-1.5 joist branch, let me know if you run into trouble or would like me to do the merge.

[jbphet]

I've made this update to the 1.5 branch and will make sure it is tested in the next release.

[KatieWoe]

stringTest=long still looks the same, but everything else looks fixed.

[jessegreenberg]

I think that is correct from the code change. The separator is now as wide as the largest panel in the dialog, not as wide as the dialog itself. stringTest=long is actually shorter than some strings in the dialog and so the panels and separator are all smaller in that test.

[KatieWoe]

What about with no parameters?

[jessegreenberg]

Do you mean like this? No parameters:

stringTest=long

In both of these cases the separator is as long as the widest panel or the dialog tabs, whichever is larger. I think this is OK behavior for i18n.

[KatieWoe]

I'm wondering if the title counts. Either way, I think this is ok. Closing

[jessegreenberg]

Ah, I see what you mean now. I think this is sufficient for i18n, but if you think it would be a general improvement feel free to create a joist issue.