search

phetsims / arithmetic

"Arithmetic" is an educational simulation in HTML5, by PhET Interactive Simulations.
http://phet.colorado.edu/en/simulation/arithmetic
GNU General Public License v3.0
5 stars 5 forks source link

Panels can be cut off with longer translations #221

Closed Nancy-Salpepi closed 2 months ago

Nancy-Salpepi commented 3 months ago

Test device iPad 9th generation

Operating System iPadOS 17.4.1

Browser Safari

Problem description For https://github.com/phetsims/qa/issues/1056, with longer translations such as with the locale Nyanja or with ?stringTest=dynamic, the Rewards Panel can be cut off. For really long translations, this could also lead to the Level panel above it to be cut off or completely off the screen.

Steps to reproduce

  1. Add stringTest=dynamic to url
  2. Complete the first level of the Multiply screen
  3. Press the right arrow 3-4 times

OR

  1. Complete the first level of Multiply screen
  2. Change the locale to Nyanja
  3. Grab the window and decrease the size

Visuals Both panels cut-off:

Screenshot 2024-03-28 at 4 25 35 PM

Top panel completely off-screen:

Screenshot 2024-03-28 at 4 26 21 PM

With smaller window size:

Screenshot 2024-03-28 at 4 57 24 PM
Luisav1 commented 3 months ago

Those strings didn't have a maxWidth set, I have added that in the commit above as well as a consistent width for the LevelCompletedNodeWrapper. Below is how it appears now. image

Luisav1 commented 2 months ago

This has been cherry-picked into arithmetic 1.2 and is ready for review by QA in the next RC.

Nancy-Salpepi commented 2 months ago

Looks good in 1.2.0-rc.2! Closing.