Layout of ABSwitch does not support dynamic labels.

[pixelzoom]

I'm still seeing this problem in MOTHA. The UI component shown below is an ABSwitch, and it's text labels have been changed via Studio. Note the overlap of the left label with the switch.

To reproduce in Studio, the phetio IDs are:

modelsOfTheHydrogenAtom.spectraScreen.view.experimentPredictionSwitch.experimentNode.textProperty modelsOfTheHydrogenAtom.spectraScreen.view.experimentPredictionSwitch.predictionNode.textProperty

Looking at ABSwitch, the problem is that it does not use an HBox for layout. It has it's own layout code, which does not support dynamic layout. So the fix is likely to use HBox.

[pixelzoom]

Sims that use ABSwitch or a subclass:

• [x] acid-base-solutions
• [x] area-builder
• [x] balancing-act
• [x] collision-lab
• [x] energy-skate-park
• [x] expression-exchange
• [x] fluid-pressure-and-flow
• [x] griddle demo
• [x] models-of-the-hydrogen-atom†
• [x] molecule-polarity
• [x] number-line-integers
• [x] number-play† (run with ?secondLocale=es in built all.html)
• [x] pendulum-lab
• [x] ph-scale†
• [x] proportion-playground
• [x] sun demo
• [x] tambo demo
• [x] tappi demo

† uses centerOnButton option

[pixelzoom]

In the above commits:

• ABSwitch was converted to a subclass of HBox, so that it supports dynamic layout
• Option xSpacing was renamed to spacing, and is the responsibility of HBox
• Option centerOnButton was renamed to centerOnSwitch since there is no "button" in this component
• The method of supporting centerOnSwitch was changed. Instead of adding an HStrut, the labels are wrapped in AlignBox to make them have the same effective size.

Usages were modified as needed, and all sims identified in https://github.com/phetsims/sun/issues/770#issuecomment-1163459590 were tested.

Since this was all pretty trivial, and everyone is busy, I'm going to forgo review. I've done a PSA to Slack#developer. Closing.