search

phetsims / natural-selection

"Natural Selection" is an educational simulation in HTML5, by PhET Interactive Simulations
GNU General Public License v3.0
3 stars 7 forks source link

Short strings misalign Add Mutation panel buttons #281

Closed KatieWoe closed 3 years ago

KatieWoe commented 3 years ago

Test device Dell Operating System Win 10 Browser Chrome Problem description Found in https://github.com/phetsims/QA/issues/644. Found in published Sim. With short string, the buttons in the Add Mutation Panel are pushed to the left and close together. Steps to reproduce

  1. Use stringTest=X parameter

Visuals

stringtest_short stringtest_normal

Troubleshooting information: !!!!! DO NOT EDIT !!!!! Name: ‪Natural Selection‬ URL: https://phet-dev.colorado.edu/html/natural-selection/1.3.0-rc.3/phet/natural-selection_all_phet.html Version: 1.3.0-rc.3 2021-04-28 22:00:28 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 Language: en-US Window: 1280x658 Pixel Ratio: 1.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

pixelzoom commented 3 years ago

@KatieWoe I don't folllow, please clarify. What exactly do you think is misaligned?

The title of this issue indicates that the buttons are misaligned, and I don't see a problem with the buttons. The column headings need to be centered over the buttons, and that looks fine with stringTest.

Or maybe you're referring to the horizontal alignment of the Mutation icon (yellow circle)? There is no requirement that the Mutation icon be horizontally centered on the 'X' above it (the title) and the 'X' below it (gene name). See examples from various languages below.

screenshot_1007 screenshot_1008 screenshot_1009
KatieWoe commented 3 years ago

I mean that the buttons are further to the left and it leaves a large amount of white space on the right, which looked misaligned to me.

pixelzoom commented 3 years ago

The control panels in this sim are designed to be fixed-width, and are supposed to fill the negative space to the right of the charts. And elements in the panels are supposesd to be left aligned. So... it's behaving as requested, whitespace has to be put somewhere, it's not affecting usability, and having something as short as "X" never occurs in reality. Arabic (see screenshot above) is about as short as it gets, and in context it looks fine.

So thanks for reporting. But I'm going to close this was "won't fix".