diff --git a/js/common/EFACConstants.js b/js/common/EFACConstants.js index 58259948..8f7bd04c 100644 --- a/js/common/EFACConstants.js +++ b/js/common/EFACConstants.js @@ -129,6 +129,7 @@ define( require => { ENERGY_SYMBOLS_PANEL_CORNER_RADIUS: 6, ENERGY_SYMBOLS_PANEL_MIN_WIDTH: 215, ENERGY_SYMBOLS_PANEL_TEXT_MAX_WIDTH: 180, + ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION: 5, CONTROL_PANEL_CORNER_RADIUS: 10, RESET_ALL_BUTTON_RADIUS: 20, PLAY_PAUSE_BUTTON_RADIUS: 20, diff --git a/js/intro/view/EFACIntroScreenView.js b/js/intro/view/EFACIntroScreenView.js index 977df5b9..dae973c3 100644 --- a/js/intro/view/EFACIntroScreenView.js +++ b/js/intro/view/EFACIntroScreenView.js @@ -604,6 +604,8 @@ define( require => { spacing: 5 } ), model.energyChunksVisibleProperty ); + showEnergyCheckbox.touchArea = + showEnergyCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION ); // Create the control for linking/un-linking the heaters const flameNode = new Image( flameImage, { @@ -619,11 +621,13 @@ define( require => { spacing: 5 } ), model.linkedHeatersProperty ); + linkHeatersCheckbox.touchArea = + linkHeatersCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION ); // Add the checkbox controls const controlPanelCheckboxes = new VBox( { children: [ showEnergyCheckbox, linkHeatersCheckbox ], - spacing: 8, + spacing: 10, align: 'left' } ); const controlPanel = new Panel( controlPanelCheckboxes, { diff --git a/js/systems/view/SystemsScreenView.js b/js/systems/view/SystemsScreenView.js index 04a72f91..cfe301a6 100644 --- a/js/systems/view/SystemsScreenView.js +++ b/js/systems/view/SystemsScreenView.js @@ -199,6 +199,8 @@ define( require => { } ), model.energyChunksVisibleProperty ); + showEnergyChunksCheckbox.touchArea = + showEnergyChunksCheckbox.localBounds.dilatedY( EFACConstants.ENERGY_SYMBOLS_PANEL_CHECKBOX_Y_DILATION ); // add the checkbox that controls the visibility of the energy chunks to a panel const showEnergyChunksPanel = new Panel( showEnergyChunksCheckbox, {