phetsims / build-a-molecule

"Build a Molecule" is an educational simulation in HTML5, by PhET Interactive Simulations.
GNU General Public License v3.0
8 stars 7 forks source link

iPad reset all button overlaps answer box #210

Closed KatieWoe closed 3 years ago

KatieWoe commented 3 years ago

Device iPad 6th Gen OS iPadOS 13.7 Browser Safari Problem Description For https://github.com/phetsims/QA/issues/538. Appears in app and in Safari browser. I haven't seen this on things like Win 10 Chrome, so may be exclusive to this platform. The answer box seems longer on this platform, and can brush up behind the reset all button. Seen on the first screen with the first challenge. Visuals Image from iOS (1) Image from iOS

KatieWoe commented 3 years ago

Tried several single levels. Several had this overlap, but none seemed to go further than this. Adding @arouinfar to see if this even needs to be addressed.

arouinfar commented 3 years ago

While not Chromebook, this seems related to https://github.com/phetsims/scenery/issues/935.

@KatieWoe does this happen other iOS devices? Did this happen in earlier dev/rc's? It would be helpful to know if this is a new issue or if it is device/iOS specific.

@Denz1994 looks like there is plenty of padding in the panel, so if you shave off a few px between the collection boxes, we should be able to get rid of the overlap.

KatieWoe commented 3 years ago

Saw on my phone and on dev.79. Sorry this got by.

Denz1994 commented 3 years ago

I made some additional room for the resetAllButton. This means slightly moving it down and reducing some of the vertical spacing between the collection box items. This should be fixed in this version. Can you verify @KatieWoe or @arouinfar?

arouinfar commented 3 years ago

The layout looks good on my laptop, but I'll leave it to @KatieWoe to verify on iPad.

KatieWoe commented 3 years ago

This looks good on iPadOS 14