iPad view of TTT page - modal extends off edge of screen (landscape)

[jwzimmer-zz]

Using an iPad ("Toast") + Safari, Staging

There are 3 fairly minor issues, 1 in portrait and 2 in landscape mode (are we supporting landscape mode?): 1) In portrait mode, the footer columns/ links are squished together. There isn't enough padding in between them. --> https://github.com/LLK/scratch-www/issues/1052 2) In landscape mode, the modal extends off the bottom of the page. 3) In landscape mode, clicking outside the modal doesn't close it.

A little more description of using an iPad to view the TTT page (see https://github.com/LLK/scratch-www/pull/1006#issuecomment-261662764), if needed:

• You can't use the tutorials in the editor; get message about being on mobile/ tablet device + plugin detection (expected)
• In portrait mode, the page has 2 columns with Animate Your Name, Make It Fly on the first row
  • Modal fills page
  • X works to close the modal
  • The footer is too squished, didn't lose columns/ links like it usually does on smaller devices
• Landscape mode (we might not even be supporting landscape mode), page has 3 columns
  • The modal doesn't fit on the page, extends off bottom
  • Clicking outside the modal doesn't close it

[mewtaylor]

The footer issue is outside the scope of the TTT page and a separate issue, and likely in production already. I'll look into the modal being too long.

[chrisgarrity]

Just to confirm, I was able to get the squished footer on the splash page on production with my Nexus 5X phone, so the footer is definitely out of scope for TTT.

[chrisgarrity]

Some additional testing on Samsung 7-inch Android tablet: In portrait mode:

• single column
• modal fills screen
• x works to close modal

Landscape mode:

• two columns (but tiles are ordered for 3 columns ): )
• modal extends off the bottom
• scrolling moves the page behind the modal, modal does not scroll
• touching outside the modal does close it (although it fills enough of the screen it's hard to touch outside)

[jwzimmer-zz]

Moved the issue @chrisgarrity found with the Android showing 2 col but wrong order to https://github.com/LLK/scratch-www/issues/1054.