Underline for Level 5 text doesn't change correctly dynamically

[KatieWoe]

Test device
Samsung
Operating System
Win 11
Browser
Chrome
Problem description
For phetsims/qa#1178
When the length of the Level 5 Info changes dynamically, the underline can change unpredictably and not change back appropriately when changing back. This leads to much longer underlines and oddly spaced text.
Steps to reproduce

1. Go to the game screen
2. Open the info dialog
3. Either change the length with stringTest=dynamic or change the locale a few times
4. Open the info dialog again

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Fourier: Making Waves‬
URL: https://phet-dev.colorado.edu/html/fourier-making-waves/1.1.0-dev.5/phet/fourier-making-waves_all_phet.html
Version: 1.1.0-dev.5 2024-12-02 18:28:06 UTC
Features missing: applicationcache, applicationcache, touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Language: en-US
Window: 1536x695
Pixel Ratio: 1.25/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: 4096
Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32)
Max viewport: 32767x32767
OES_texture_float: true
Dependencies JSON: {}

[KatieWoe]

Also happens in the game:

[pixelzoom]

@jonathanolson and I discussed this on Zoom. The problem involves RichText, which is supposed to totally rebuild itself when its associated stringProperty changes. But inspecting the RichText in the scenery Helper, we can see that there are old Lines being left around. This may involve pooling or something else. @jonathanolson is going to have a look.

[pixelzoom]

If it makes debugging this any easier, below is a patch that I used to isolate this problem to RichText. It adds a RichText instance to the Wave Game screen (so you don't have to open the Info dialog) and simplifies the string so that it only involves underline markup.

patch

Subject: [PATCH] create NumberPairsPreferences, add initial Property values to NumberPairsQueryParameters, https://github.com/phetsims/number-pairs/issues/22
---
Index: fourier-making-waves-strings_en.json
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/fourier-making-waves-strings_en.json b/fourier-making-waves-strings_en.json
--- a/fourier-making-waves-strings_en.json	(revision 2e6b21715e9c06c43e71cbe0c137f4566d4eef67)
+++ b/fourier-making-waves-strings_en.json	(date 1733330660814)
@@ -201,7 +201,7 @@
     "value": "<b>Level {{levelNumber}}</b>: {{numberOfHarmonics}} harmonics"
   },
   "infoNOrMoreHarmonics": {
-    "value": "<b>Level {{levelNumber}}</b>: {{numberOfHarmonics}} <u>or more</u> harmonics"
+    "value": "Level 5: 5 <u>or more</u> harmonics"
   },
   "checkAnswer": {
     "value": "Check Answer"
Index: js/waveGame/view/WaveGameLevelSelectionNode.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/waveGame/view/WaveGameLevelSelectionNode.ts b/js/waveGame/view/WaveGameLevelSelectionNode.ts
--- a/js/waveGame/view/WaveGameLevelSelectionNode.ts	(revision 2e6b21715e9c06c43e71cbe0c137f4566d4eef67)
+++ b/js/waveGame/view/WaveGameLevelSelectionNode.ts	(date 1733331085147)
@@ -13,7 +13,7 @@
 import InfoButton from '../../../../scenery-phet/js/buttons/InfoButton.js';
 import ResetAllButton from '../../../../scenery-phet/js/buttons/ResetAllButton.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { Node, Text, VBox } from '../../../../scenery/js/imports.js';
+import { Node, RichText, Text, VBox } from '../../../../scenery/js/imports.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import FMWConstants from '../../common/FMWConstants.js';
 import fourierMakingWaves from '../../fourierMakingWaves.js';
@@ -88,6 +88,19 @@
     // pdom - traversal order
     // See https://github.com/phetsims/fourier-making-waves/issues/53
     this.pdomOrder = [ levelSelectionButtonGroup, infoButton, resetAllButton ];
+
+    const testText = new RichText( FourierMakingWavesStrings.infoNOrMoreHarmonicsStringProperty, {
+      font: new PhetFont( 16 ),
+      left: 100,
+      top: levelSelectionButtonGroup.bottom + 100
+    } );
+    this.addChild( testText );
+
+    FourierMakingWavesStrings.infoNOrMoreHarmonicsStringProperty.link( string =>
+      console.log( `infoNOrMoreHarmonicsStringProperty=${string}` ) );
+
+    testText.stringProperty.link( string =>
+      console.log( `testText.stringProperty=${string}` ) );
   }
 
   /**