Use layoutStrategy so that the KeyboardHelpDialog is constrained to t…

…he simulation bounds, see #546

js/KeyboardHelpDialog.js

@@ -41,20 +41,21 @@ define( function( require ) {
   function KeyboardHelpDialog( helpContent, options ) {
     var self = this;
 
-    // get the screen width for the screenView that is currently being displayed, then we can set the maxWidth accordingly.
-    var screenWidth = phet.joist.sim && phet.joist.sim.currentScreenProperty &&
-                      phet.joist.sim.currentScreenProperty.get() &&
-                      phet.joist.sim.currentScreenProperty.get().view &&
-                      phet.joist.sim.currentScreenProperty.get().view.layoutBounds.width || 1000;
-
     options = _.extend( {
       titleAlign: 'center',
       fill: 'rgb( 214, 237, 249 )',
       ySpacing: 15,
       tandem: Tandem.required,
 
-      // empirically determined to have some margin relative to max width
-      maxWidth: .73 * screenWidth
+      // the width of the KeyboardHelpDialog is constrained to the simulation bounds
+      layoutStrategy: function( dialog, simBounds, screenBounds, scale ) {
+
+        // empirically determined to have some margin relative to max width
+        dialog.maxWidth = ( simBounds.width / scale ) * 0.90;
+
+        // this is the default layout strategy in Dialog
+        dialog.center = simBounds.center.times( 1.0 / scale );
+      }
     }, options );
 
     // title