"Bond Character Panel" title is not centered in locales other an English

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 13.4

Browser Safari 16.4

Problem description For https://github.com/phetsims/qa/issues/952 the title of the bondCharacterPanel doesn't stay centered in locales other than English (ex. German). This is easily seen with ?stringTest=dynamic.

Steps to reproduce

1. Add ?stringTest=dynamic to end of url
2. On the Two Atoms screen, check the Bond Character checkbox
3. Press the down arrow to cycle through different words.

Visuals

Deutsch:

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: antidisestablishmentarianism URL: https://phet-dev.colorado.edu/html/molecule-polarity/1.3.0-dev.3/phet/molecule-polarity_all_phet.html?stringTest=dynamic Version: 1.3.0-dev.3 2023-06-05 15:13:48 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.5 Safari/605.1.15 Language: en-US Window: 1357x706 Pixel Ratio: 2/1 WebGL: WebGL 1.0 GLSL: WebGL GLSL ES 1.0 (1.0) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

There's a problem with the rightmost ("more ionic") label too. It does not stay right justified. See screenshots above.

[Nancy-Salpepi]

Ah you beat me to it! I was just coming back to add that!

[pixelzoom]

Fixed in the above commit. Tested with ?stringTest=dynamic, screenshots below. Note that vertically centering the labels in the whitespace is not a goal.

@Nancy-Salpepi please verify in master, close if OK.

[Nancy-Salpepi]

Fixed in master. Closing.