Stopwatch display size can be larger than stopwatch

[Nancy-Salpepi]

Test device MacBook Air M1 chip and iPad

Operating System macOS 14.1.2 and iPadOS 17.2

Browser Chrome and Safari

Problem description For https://github.com/phetsims/qa/issues/1023, the size of the time display on the stopwatch can exceed the size of the stopwatch itself. This is seen when the locale is French but also really easy to see with stringTest=dynamic.

Steps to reproduce

1. Add ?stringTest=dynamic to the end of the url
2. Go to any screen and check the Stopwatch
3. Press the right arrow key once.

Visuals

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: Kepler's LawsKepler's Laws URL: https://phet-dev.colorado.edu/html/keplers-laws/1.2.0-dev.7/phet/keplers-laws_all_phet.html?stringTest=dynamic Version: 1.2.0-dev.7 2024-01-09 17:06:22 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Language: en-US Window: 1384x728 Pixel Ratio: 2/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: 1024 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 16384x16384 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

This is probably a problem with StopwatchNode or NumberDisplay (used by StopwatchNode).

@AgustinVallejo Let me know if you need assistance with this.

[AgustinVallejo]

Paired with @jonathanolson and @zepumph to solve. Assigning back for review, it should be nice now. Assigning back for review

[Nancy-Salpepi]

Looks good on main now! Closing,