Update index.html to better handle mobile devices

[antithalian]

Adds the meta element for viewport, which, I think, should help with the size issues on mobile.

[danerwilliams]

still looks fairly weird on mobile. maybe we could set like a maximum width of the file selection and text input elements so that on desktop it doesn't take up the full width of the screen, but if the width of the screen is small than the maximum width like on mobile then it takes up the full width?

[antithalian]

Hmm. Is there any way we can gate the size on the size of the screen in play? Or can we set the width in rem to have it be based on screen size?

[danerwilliams]

You can do a percentage but then it would scale really large on a desktop display. I think there's a max width property along with flex box in css thats probably our best bet.

[antithalian]

Most common mobile devices now look acceptable in Chrome's devtools viewer. There's probably a way to programmatically change the placeholder text size instead of just making the message a bit shorter, but my research/testing didn't turn anything up in a little while of Googling.

[danerwilliams]

it still looks off to me :/

[antithalian]

That’s weird, it looked OK when I tried it. Although that’s a standard “but it works on my machine” response...

I’ll try running it on my network and see if it looks better on the actual phone hardware.

[antithalian]

Here's screenshots from an iPhone 11 and a 5s. Looks ok, I think?

[danerwilliams]

what's it look like in chrome dev tools as mobile device -> responsive for you (or a specific device)?