Layout changes on Energy screen

[pixelzoom]

For https://github.com/phetsims/qa/issues/1102 ... From https://github.com/phetsims/hookes-law/issues/81#issuecomment-2197533334 by @Nancy-Salpepi:

A couple of differences I see when comparing to the published version:

• On the Energy screen, the Energy Checkbox has shifted to the right
• On the Energy screen, when at max values the Applied Force arrow now touches the panel.

Dev Version vs. Published:

Also with ?stringTest=dynamic, the text background of the Applied Force Value can overlap the panel slightly when Displacement =1.

[pixelzoom]

@Nancy-Salpepi please review, close if OK. Note the decision NOT to right-align icons in https://github.com/phetsims/hookes-law/issues/100.

[Nancy-Salpepi]

These issues look fixed on main:

• [x] On the Energy screen, the Energy Checkbox has shifted to the right
• [x] On the Energy screen, when at max values the Applied Force arrow now touches the panel
• [x] Also with ?stringTest=dynamic, the text background of the Applied Force Value can overlap the panel slightly when Displacement =1.

On the Systems Screen, I noticed that with longer strings the text background for the Applied Force can overlap the purple Spring Force arrow. I also see this in published with ?stringTest=double.....so feel free to ignore and close.

[pixelzoom]

The problem in https://github.com/phetsims/hookes-law/issues/95#issuecomment-2204130191 is that there's a translucent background behind each vector value. The margins of that value were a function of the dimensions of the value, so as the value got longer, the margins got bigger, and hence the overlap. Constant margins make more sense, implemented in https://github.com/phetsims/hookes-law/commit/3918aa935d6f28e5f321201624299e1e198dc8ee.

Back to @Nancy-Salpepi for another verification, close if OK.

[Nancy-Salpepi]

Looks nice. Closing.