From 3979a6eac9d9c131153f55faf4e44eafdbdcbb8c Mon Sep 17 00:00:00 2001
From: pixelzoom <cmalley@pixelzoom.com>
Date: Tue, 6 Jun 2023 11:16:09 -0600
Subject: [PATCH] support for dynamic locale,
 https://github.com/phetsims/graphing-quadratics/issues/178

---
 js/linegame/view/SettingsNode.ts | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/js/linegame/view/SettingsNode.ts b/js/linegame/view/SettingsNode.ts
index 13f532f3..683d9e9d 100644
--- a/js/linegame/view/SettingsNode.ts
+++ b/js/linegame/view/SettingsNode.ts
@@ -46,7 +46,7 @@ export default class SettingsNode extends Node {
     }, providedOptions );
 
     // Title
-    const title = new Text( GraphingLinesStrings.chooseYourLevel, {
+    const title = new Text( GraphingLinesStrings.chooseYourLevelStringProperty, {
       font: new PhetFont( 40 ),
       maxWidth: 0.85 * layoutBounds.width
     } );
@@ -57,6 +57,16 @@ export default class SettingsNode extends Node {
         tandem: options.tandem.createTandem( 'levelSelectionButtonGroup' )
       }, options.levelSelectionButtonGroupOptions ) );
 
+    // title is centered on level-selection buttons
+    const vBox = new VBox( {
+      children: [ title, levelSelectionButtonGroup ],
+      align: 'center',
+      spacing: 50
+    } );
+    vBox.boundsProperty.link( () => {
+      vBox.center = layoutBounds.center;
+    } );
+
     // Timer and Sound controls
     const timerToggleButton = new TimerToggleButton( model.timerEnabledProperty, {
       stroke: 'gray',
@@ -74,13 +84,7 @@ export default class SettingsNode extends Node {
     } );
 
     options.children = [
-      // title and level-selection buttons centered
-      new VBox( {
-        children: [ title, levelSelectionButtonGroup ],
-        align: 'center',
-        spacing: 50,
-        center: layoutBounds.center
-      } ),
+      vBox,
       timerToggleButton,
       resetAllButton
     ];