Size of pointer areas changes as bonds are added

[Nancy-Salpepi]

Test device MacBook Air M1 chip

Operating System 13.1

Browser Chrome

Problem description For https://github.com/phetsims/qa/issues/905 and https://github.com/phetsims/qa/issues/906, the size of the pointer areas in the Name panel changes with longer text locales such as Hausa. This is seen on both screens.

Steps to reproduce

1. Add ?showPointerAreas to url
2. Change locale to Hausa
3. Check both checkboxes in the Name panel
4. Add bonds and lone pairs

Visuals

https://user-images.githubusercontent.com/87318828/220463318-5d54a5d0-9055-41d2-af17-b358d85a6215.mp4

[jonathanolson]

I believe fixed in master, patched up on release branches. @Nancy-Salpepi can you check master?

[Nancy-Salpepi]

The size of the pointer/touch areas in the Name panel still changes with some locales (ex. Hausa, Igbo) as I add bonds/lone pairs.

[jonathanolson]

Sorry, I mis-read the issue!

I believe this should be patched up a bit better in master and the branches.

1. The width of the pointer areas should be fixed
2. The resizing of the panel and its height changing should be fixed
3. The height of the pointer areas slightly changes (due to the text being sized down). I'd prefer to leave as-is, as I don't think this is significant.

@Nancy-Salpepi does this look good in master? Thoughts?

[Nancy-Salpepi]

I think things are looking very nice in master!

[jonathanolson]

Sounds good!

[Nancy-Salpepi]

Actually @jonathanolson I am noticing that this part isn't fixed with all locales:

The resizing of the panel and its height changing should be fixed

Ex. Igbo, the size of the name panel still changes in master (I see the shift when the molecule geometry is trigonal planar). Another example is with Yoruba.

Sorry!

[jonathanolson]

No need to apologize, thank you for finding this! Reproducing, working on it.

[jonathanolson]

I believe this is fixed on master (and I've patched the release branches). @Nancy-Salpepi can you verify on master?

[Nancy-Salpepi]

I checked several locales and the Name panel size looks like it remains fixed. However, now with some locales the pointer/touch area size changes as I add bonds and they can overlap. Some examples are with Lao and Yaruba:

In the Basics version, the pointer/touch areas can extend beyond the panel. Here is an example with Lao:

I'm on macOS 13.2.1 and I see this with safari and chrome.

[jonathanolson]

Apologies about that! The touch areas for the two were reversed. Can you verify master now? Thank you!

[Nancy-Salpepi]

I looked at several locales and all seems to be correct now 🙂.

[jonathanolson]

Please close after verifying!

[Nancy-Salpepi]

This looks good in rc.2 for this sim and basics.