From 7e182834709e25f2879269d88867cfd304907236 Mon Sep 17 00:00:00 2001
From: jbphet <jpblanco@yahoo.com>
Date: Tue, 10 Jan 2023 16:05:15 -0700
Subject: [PATCH] set max widths for labels where they were missing, see
 https://github.com/phetsims/greenhouse-effect/issues/246

(cherry picked from commit 95fa513e8911410b72c4945579f62cfda054ae63)
---
 js/common/view/AtmosphereLayerNode.ts           | 3 ++-
 js/common/view/GreenhouseEffectCheckbox.ts      | 6 +++++-
 js/layer-model/view/TemperatureUnitsSelector.ts | 7 ++++++-
 js/waves/view/CloudCheckbox.ts                  | 1 +
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/js/common/view/AtmosphereLayerNode.ts b/js/common/view/AtmosphereLayerNode.ts
index c0f4eb31..85571f37 100644
--- a/js/common/view/AtmosphereLayerNode.ts
+++ b/js/common/view/AtmosphereLayerNode.ts
@@ -142,7 +142,8 @@ class AtmosphereLayerNode extends Node {
       cornerRadius: 3,
       noValueAlign: 'center',
       textOptions: {
-        font: new PhetFont( 14 )
+        font: new PhetFont( 14 ),
+        maxWidth: 120
       }
     } );
 
diff --git a/js/common/view/GreenhouseEffectCheckbox.ts b/js/common/view/GreenhouseEffectCheckbox.ts
index e337d3bd..d24eab73 100644
--- a/js/common/view/GreenhouseEffectCheckbox.ts
+++ b/js/common/view/GreenhouseEffectCheckbox.ts
@@ -11,7 +11,7 @@ import Property from '../../../../axon/js/Property.js';
 import TReadOnlyProperty from '../../../../axon/js/TReadOnlyProperty.js';
 import optionize from '../../../../phet-core/js/optionize.js';
 import PhetFont from '../../../../scenery-phet/js/PhetFont.js';
-import { HBox, Node, Text } from '../../../../scenery/js/imports.js';
+import { HBox, Node, Text, TextOptions } from '../../../../scenery/js/imports.js';
 import Checkbox, { CheckboxOptions } from '../../../../sun/js/Checkbox.js';
 import Tandem from '../../../../tandem/js/Tandem.js';
 import greenhouseEffect from '../../greenhouseEffect.js';
@@ -24,6 +24,8 @@ const LABEL_FONT = new PhetFont( {
 
 type SelfOptions = {
 
+  maxLabelTextWidth?: number;
+
   // if provided, will be included in the icon for the checkbox
   iconNode?: Node | null;
 };
@@ -36,6 +38,7 @@ class GreenhouseEffectCheckbox extends Checkbox {
 
     const options = optionize<GreenhouseEffectCheckboxOptions, SelfOptions, CheckboxOptions>()( {
       iconNode: null,
+      maxLabelTextWidth: 180, // empirically determined, works well for most cases in Greenhouse
 
       // i18n
       maxWidth: 250,
@@ -49,6 +52,7 @@ class GreenhouseEffectCheckbox extends Checkbox {
 
     const labelText = new Text( labelStringProperty, {
       font: LABEL_FONT,
+      maxWidth: options.maxLabelTextWidth,
       tandem: options.tandem.createTandem( 'labelText' )
     } );
 
diff --git a/js/layer-model/view/TemperatureUnitsSelector.ts b/js/layer-model/view/TemperatureUnitsSelector.ts
index 72563a10..352908d0 100644
--- a/js/layer-model/view/TemperatureUnitsSelector.ts
+++ b/js/layer-model/view/TemperatureUnitsSelector.ts
@@ -10,6 +10,7 @@ import greenhouseEffect from '../../greenhouseEffect.js';
 import GreenhouseEffectStrings from '../../GreenhouseEffectStrings.js';
 
 const LABEL_FONT = new PhetFont( 14 );
+const UNITS_LABEL_MAX_WIDTH = 50;
 
 /**
  * TemperatureUnitsSelector is a UI component that allows a user to select between Kelvin, degrees Celsius, or degrees
@@ -23,6 +24,7 @@ class TemperatureUnitsSelector extends VBox {
     // Create the label that sits above the radio button selectors.
     const label = new Text( GreenhouseEffectStrings.temperatureUnitsStringProperty, {
       font: LABEL_FONT,
+      maxWidth: 200,
       tandem: tandem.createTandem( 'labelText' )
     } );
 
@@ -33,6 +35,7 @@ class TemperatureUnitsSelector extends VBox {
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.kelvinStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.KELVIN,
@@ -41,14 +44,16 @@ class TemperatureUnitsSelector extends VBox {
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.celsiusStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.CELSIUS,
-          tandemName: 'celciusRadioButton'
+          tandemName: 'celsiusRadioButton'
         },
         {
           createNode: tandem => new Text( GreenhouseEffectStrings.temperature.units.fahrenheitStringProperty, {
             font: LABEL_FONT,
+            maxWidth: UNITS_LABEL_MAX_WIDTH,
             tandem: tandem.createTandem( 'text' )
           } ),
           value: TemperatureUnits.FAHRENHEIT,
diff --git a/js/waves/view/CloudCheckbox.ts b/js/waves/view/CloudCheckbox.ts
index 50becddd..335881aa 100644
--- a/js/waves/view/CloudCheckbox.ts
+++ b/js/waves/view/CloudCheckbox.ts
@@ -45,6 +45,7 @@ class CloudCheckbox extends GreenhouseEffectCheckbox {
     const options = optionize<CloudCheckboxOptions, SelfOptions, GreenhouseEffectCheckboxOptions>()( {
       iconNode: iconNode,
       helpText: GreenhouseEffectStrings.a11y.cloudCheckboxHelpTextStringProperty,
+      maxLabelTextWidth: 120,
 
       // phet-io
       tandem: Tandem.REQUIRED